Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Create a Responsive Image Slider in jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 117
    Comment on it

    By using jquery image slider plugin we can create Responsive Image slider .In below example, I am using rslider plugin.

    Step-1. Link files
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="responsiveslides.min.js"></script>
    
    Step-2. Add Markup
    <ul class="rslides">
      <li><img src="1.jpg" alt=""></li>
      <li><img src="2.jpg" alt=""></li>
      <li><img src="3.jpg" alt=""></li>
    </ul>
    
    Step-3. Add CSS
    . rslides {
      position: relative;
      list-style: none;
      overflow: hidden;
      width: 100%;
      padding: 0;We will code it using the FlexSlider plugin for the functionality and style it using CSS3
      margin: 0;
      }
    
    . rslides li {
      -webkit-backface-visibility: hidden;
      position: absolute;
      display: none;
      width: 100%;
      left: 0;
      top: 0;
      }
    
    . rslides li:first-child {
      position: relative;
      display: block;
      float: left;
      }
    
    . rslides img {
      display: block;
      height: auto;
      float: left;
      width: 100%;
      border: 0;
      }
    
    Step-4. Hook up the slideshow
    <script>
      $(function() {
        $(".rslides").responsiveSlides();
      });
    </script>
    
    Step-5. Options you can customize
    $(".rslides").responsiveSlides({
      auto: true,             
      speed: 300,           
      timeout: 2000,          
      pager: false,           
      nav: false,             
      random: false,          
      pause: false,           
      pauseControls: true,     
      prevText: "Previous",   // String: Text for the "previous" button
      nextText: "Next",       // String: Text for the "next" button
      maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
      navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
      manualControls: "",     // Selector: Declare custom pager navigation
      namespace: "rslides",   // String: Change the default namespace used
      before: function(){},   // Function: Before callback
      after: function(){}     // Function: After callback
    });
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: