WebDesignerGeeks – Web Designer, Web Developer blog -

In this post, I will show you How To Create Simple jQuery Simple Slideshow?

Dont Know JQuery?

If you are new to jQuery, Dont worry its real simple to use and implement. If you really want to get stuck into jquery then nettuts have wrote a complete series on the subject SEE THIS LINK.

Whats JQuery?

Firstly whats jquery? i hear you ask, well jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.

Tutorial Details

• Language: jQuery, CSS, HTML
• Difficulty: Beginner
• Estimated Completion Time: 30  minutes

Final Product What You’ll Be Creating

Step 1: HTML Code

As you can see its a very simple html code, We just attached jQuery and jquery.imageslider.js file.

How to create jQuery Simple Slide Show?

		
		
		
		
		
	

Step 2: CSS Code

*{margin:0;padding:0;}

.title
{
background-image:url(images/title.png);
width:315px;
height:200px;
margin:10px auto 10px;
}

.abouttext
{
font-family: Verdana,Geneva,sans-serif;
font-size: 20px;
font-weight: bold;
margin: 50px auto;
text-align: center;
width: 630px;
}
.sliderscontainer
{
position:relative;
margin:30px auto 0;
width:630px;
height:350px;
background-color:#fff;
border:15px solid #fff;
box-shadow:1px 1px 10px #000;
-moz-box-shadow:1px 1px 10px #000;
-webkit-box-shadow:1px 1px 10px #000;
}
.slidersindicator
{
position:relative;
margin:10px auto;
width:640px;
text-align:center;
}
.slidersindicator .counter
{
width:19px;
height:19px;
display:inline-block;
background-image:url("images/inactive.png");
margin-right:10px;
background-repeat:no-repeat;
}

.slidersindicator .isactive
{
background-image:url("images/active.png") !important;
}

.arrow_next
{
width:50px;
height:100px;
background-image:url("images/arrow_next.png");
background-repeat:no-repeat;
position:absolute;
right:0;top:40%;
cursor:pointer;
}

.arrow_prev
{
width:50px;
height:100px;
background-image:url("images/arrow_prev.png");
background-repeat:no-repeat;
position:absolute;
left:0;top:40%;
cursor:pointer;
}
/*Style for plugin image slider*/
.slides
{
width:640px;
height:480px;
background-position:center center;
}