Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to put a slider using jQuery plugin and jQuery?

    @munmun.sarkar
    Recommendations Offline Message

    • 0
    • 3
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 124
    Comment on it

    Adding a custom slider into a web page or website enhances the look and feel of the website. Hence, below is the code of making a custom slider and using it in your web site.

    I am using jQuery and a plugin called SlidesJS. You just have to include the jQuery.js or jQuery.min.js file and jQuery.slides.min.js file which contains the needed styling and features. SlidesJS is a responsive slideshow plug-in for jQuery. You can easily get the js file on GitHub.

    Below is the HTML code. I have also added a next and previous button feature. 

    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="utf-8">
    5.   <title>Slider</title>
    6.   <link rel="stylesheet" href="css/drag.css">
    7.   <script type="text/javascript" src="js/jquery.js"></script>
    8.   <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    9.   <script src="js/jquery.slides.min.js"></script>
    10.   <script type="text/javascript" src="js/drag.js"></script>
    11.  </head>
    12. <body>
    13.  
    14. <h3 class="first">Demo Interactive UI's</h3>
    15. <div class="container">
    16. <div id="slides">
    17.     <img id="imageSlide" alt="" src="" />
    18.     </div>
    19.     <button id="prev"></button>
    20. <button id="next"></button>
    21.     </div>
    22. </body>
    23. </html>

    Now add this js code into a js file. This is code inside drag.js file.

    1. $('#slides').slidesjs({
    2.         width: 940,
    3.         height: 528,
    4.       });
    5.  
    6.       var imgs = ["images/bcg_slide-1.jpg",
    7.                   "images/river.jpg",
    8.                 "images/example-slide-3.jpg",
    9.                 "images/city.jpg"]
    10.     var cnt = imgs.length;
    11.  
    12.         setInterval(Slider, 2000);
    13.  
    14.     function Slider() {
    15.     $("#imageSlide").show("fast", function() {
    16.        $(this).attr("src", imgs[(imgs.length++) % cnt]).show();
    17.     });
    18.      }
    19.     $('#next').on('click', getNext);
    20.     $('#prev').on('click', getPrev);
    21.     var count = 0;
    22.     function getNext() {
    23.       count = imgs.length++;
    24.   $('#imageSlide').attr("src", imgs[count % cnt]).show();
    25.  
    26. }
    27.  
    28. function getPrev() {
    29.   count = imgs.length--;
    30.   $('#imageSlide').attr("src", imgs[count % cnt]).show();
    31. }

    In the above code I have used an array for storing the images. Using a variable cnt and count I am keeping a record of the total no. of images that is used in the next and previous button functions.

    I hope this will help you all to create a slider and implement it.

    custom slider slider using jQuery plugin custom slider using SlidesJS implement slider using jQuery and jQuery plugin jquery custom slider
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: