Simple banner image slider gallery in Jquery

If you want jquery galleries in your webpage, you will get lots of plugins out there. But these plugins are loaded with lots of other js and css files, which are mostly heavy for loading page and also difficult for modification. I was exactly don't want this for my website.

      
       So I tried to reduce javascript for lighten the page. This slider will never do fancy thing but sufficient for show images one by one.

Let us start now. First of all we start with html.

<div class="bannerdiv">
     
      <div class="mainslider">
          
        <img src="images/img1.jpg" alt="Name1" rel="http//yourlink"/>
                <img src="images/img2.jpg" alt="Name2" rel="http//yourlink"/>
                <img src="images/img3.jpg" alt="Name3" rel="http//yourlink"/>
      </div>

<span class="bannercaption">Banner alt will displayed here</span>

       <a class="nextslide slidenav" href="#" id="hyp_NextGallery"></a>
<a class="prevslide slidenav" href="#" id="hyp_PreviousGallery" style="display: none;"></a>

</div>

Here banner div contain two sections. First is 'mainslider' which is containing images of slide show and second one is a span tag which will contain banner caption. You can do styling of it in your way. If you notice banner img tag containing alt and rel attribute, this we will use as our caption for that particulate image.

Now let's do css part. I am setting a height of my banner 500px. You can change it as your need.  


/*******************************css*******************************************//////////////////

.bannerdiv {
position: relative;
float: left;
width: 100%;
top: 0;
margin-bottom: 12px;
margin-top: 50px;
overflow: hidden;
max-height: 500px;
}

.mainslider img {
position: absolute;
width: 100%;
}
.bannercaption{
position: absolute;
bottom: 2px;
right: 2px;
z-index: 1;
font-size: 14px;
color: #fff;
background-color: rgba(0, 0, 0, 0.51);
padding: 5px;
}
a.nextslide {
position: absolute;
color: rgb(255, 255, 255);
top: 0;
font-size: 27px;
background-position: 3px center;
right: 0px;
}

a.prevslide {
position: absolute;
color: rgb(255, 255, 255);
top: 0;
font-size: 27px;
left: 0px;
background-position: -29px center;
}

a.slidenav {
width: 37px;
height: 100%;
background-image: url('../Images/slim-arrow-sprite.png');
background-repeat: no-repeat;

}


It's time for important part of an banner slider, that means Javascript. We are using library here.
Here we are using 'setInterval' for continuous image change. For next and previous we are using two 'a' tags, 'prevslide' and 'nextslide'. On their click we are performing particular task.  
/*****************************js****************************************///////////////////
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
$(document).ready(function () {

    $('.mainslider img:gt(0)').hide();
    setInterval(function () { $('.mainslider :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('.mainslider'); }, 5000);


    $('.mainslider :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('.mainslider').ready(function () { $('.bannercaption').html("<a href='" + $('.mainslider :first-child').attr('rel') + "'>" + $('.mainslider :first-child').attr('alt') + "</a>"); });



    $('.nextslide').click(function () {
        $('.mainslider :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('.mainslider').ready(function () { $('.bannercaption').html("<a href='" + $('.mainslider :first-child').attr('rel') + "'>" + $('.mainslider :first-child').attr('alt') + "</a>"); }); ;

        return false;

    });


  $('.prevslide').click(function () {
        $('.mainslider :first-child').fadeOut(1000);
        $('.mainslider :last-child').fadeIn(1000).end();

        $('.mainslider').prepend($('.mainslider :last-child')).ready(function () { $('.bannerauthor').html("<a href='" + $('.mainslider :first-child').attr('rel') + "'>" + $('.mainslider :first-child').attr('alt') + "</a>"); }); 

        return false;
    });


});

</script>

So this is it. This code is simple and lighter than other heavy slider plugins and also easy for modification that you want in your page.