jQuery Carousel Download Free

Download and install free jquery Carousel script. this script is very useful for banner slideshow at the home page of any website. User can customize the design of nav buttons left and right. It also works on mouse drag.

<<
>>

Installation Guide
Include the Following Script at the head section of your page

 <script src="js/slider.js"> </script>
 <script>
    $.noConflict();
    var sl;
    jQuery( document ).ready(function( $ ) {
        sl = new slider();
        sl.item_list = jQuery(".list > div");
        sl.container = jQuery('#slider');
        sl.goLeft = jQuery("#goleft");
        sl.goRight = jQuery("#goright");
        sl.setup();
    });
</script>

Set main container where you want to run carousel

 <div id="slider"></div>
    <a href="javascript:void(0);" id="goleft"> << </a>
    <a href="javascript:void(0);" id="goright"> >> </a>
   

Put all images/html div in following manner. all image and div should exactly same size. You can use html code in each div. set the size of all div in the inline css. All divs should be display:none as done in the following code.

    <div class="list" style="display:none;">
        <div id="index-1" style="width:590px;" draggable="false"><img src="banner/image1.jpg"></div>
        <div id="index-2" style="width:590px;" draggable="false"><img src="banner/image2.jpg"></div>
        <div id="index-3" style="width:590px;" draggable="false"><img src="banner/image3.jpg"></div>
        <div id="index-4" style="width:590px;" draggable="false"><img src="banner/image4.jpg"></div>
        <div id="index-5" style="width:590px;" draggable="false"><img src="banner/image5.jpg"></div>
    </div>

Please Download the working example form download button

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

9 + 8 =