jQuery Image Slider

A slideshow is a series of pictures or pages of information, often displayed on the screen.Image slideshows are most popular method of displaying a larger volume of pictures in websites.By using the jQuery , we can easily create a slideshow of our own, complete with navigation controls.

When designing a portfolio,there are many different to organize your projects. One good way is to use slideshow.The slideshow moves from slide to slide is actually more important than you may think. There are many transition effects /events that can be used in a slideshow.

Ok. Let me ask a question first , before we go to the example. 

Why are slideshows such a popular method of displaying content among websites?
  We can show many information in slideshow without loss of space.I mean we can show content / images by moving the slide to slide . We will get lot of other spaces to make our websites cool.

Lets start the project:

Create HTML :
                    
  First we create a new HTML Document and set the structure of our page.
Start out by creating a div in the body with an ID of "slideshow" .

<div id="slideshow">
</div>

Add another div container with a ID of "slideshow-wrapper". Inside the "slideshow" div we place our slideshow div ( which is going to have image reference) with CLASS of "slide" and ID of "slide".

<div id= "slideshow">
  <div id = "slideshow-wrapper">
        <div class="slide" id="slide1"></div>
        <div class="slide" id="slide2"></div>
        <div class="slide" id="slide3"></div>
        <div class="slide" id="slide4"></div>
   <div>
</div>

Now We will create a code for pagination buttons. I like pagination with slideshow because its easy to move to any slide.

 <div id="slideshow-nav"> 
         <a href="#slide1">1</a>
         <a href="#slide2">2</a>
         <a href="#slide3">3</a>
         <a href="#slide4">4</a>

        <div>
            <span id="slideshow-nav-current">1</span> of <span id="slideshow-nav-total"></span>
        </div>

  </div>

In the above code you will see the span element and you may even think why we need that .I will explain this , here we going to show current and total page number so, we going to use TWO span element with ID "slideshow-nav-current" and "slideshow-nav-total".

Add CSS:

#slideshow {
    margin: 2em auto;
    width: 70%;
    max-width: 40em;
    overflow: hidden;
}

#slideshow-wrapper {
    width: 1600em;
    height: 15em;
    position: relative;
}

div.slide {
    width: 40em;
    height: 15em;
    float: left;
    background-repeat: no-repeat;
    background-size: contain;
}

#slide1 {
    background-image: url(http://www.hdwallpapersinn.com/wp-content/uploads/2015/02/Natural-Hd-wallpapers-statspic.jpg);
}

#slide2 {
    background-image: url(http://feelgrafix.com/data_images/out/20/930316-desert.jpg);
}

#slide3 {
    background-image: url(http://wallpaperswiki.org/wallpapers/2012/10/Nature-Landscape-Wonderful-Natural-Scenery-Desktop-Picture--485x728.jpg);
}

#slide4 {
    background-image: url(http://bestpics.in/wp-content/uploads/2014/07/natural_beautiful_green.jpg);
}

#slideshow-nav {
    margin: 1em 0;
    text-align: center;
}

#slideshow-nav a {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5;
    border: 1px solid silver;
    color: #333;
    text-decoration: none;
    margin-right: 0.5em;
}

#slideshow-nav a.active {
    background: #000;
    color: #fff;
    border-color: #000;

}


 For jQuery please see this jsfiddle, then you will get better understanding.

Example : Try this jsfiddle