• 1.
    # first this html code :
  • 2.
    =================================
  • 3.
     
  • 4.
    <ul class="slider" id="sliderName4">
  • 5.
          
  • 6.
           <li class="slide">
  • 7.
          
  • 8.
          <ul class="items">
  • 9.
            <li><a href="#"><img src="images/img/clients/client-1.jpg" alt="" /></a></li>
  • 10.
            <li><a href="#"><img src="images/img/clients/client-2.jpg" alt="" /></a></li>
  • 11.
            <li><a href="#"><img src="images/img/clients/client-3.jpg" alt="" /></a></li>
  • 12.
            <li><a href="#"><img src="images/img/clients/client-4.jpg" alt="" /></a></li>
  • 13.
            <li><a href="#"><img src="images/img/clients/client-5.jpg" alt="" /></a></li>
  • 14.
          </ul><!-- End items -->
  • 15.
          
  • 16.
          </li><!-- End slide --> 
  • 17.
          
  • 18.
          <li class="slide">
  • 19.
          
  • 20.
          <ul class="items">
  • 21.
            <li><a href="#"><img src="images/img/clients/client-1.jpg" alt="" /></a></li>
  • 22.
            <li><a href="#"><img src="images/img/clients/client-2.jpg" alt="" /></a></li>
  • 23.
            <li><a href="#"><img src="images/img/clients/client-3.jpg" alt="" /></a></li>
  • 24.
            <li><a href="#"><img src="images/img/clients/client-4.jpg" alt="" /></a></li>
  • 25.
            <li><a href="#"><img src="images/img/clients/client-5.jpg" alt="" /></a></li>
  • 26.
          </ul><!-- End items -->
  • 27.
          
  • 28.
          </li><!-- End slide --> 
  • 29.
              
  • 30.
          </ul>
  • 31.
    =================================
  • 32.
     
  • 33.
    # second this is changes in [ js/custom.js ] file :
  • 34.
    1- open file [ js/custom.js ] .
  • 35.
    2- search about this code :
  • 36.
     
  • 37.
    // Carousel slider
  • 38.
    $(document).ready(function() {
  • 39.
    $('.slidewrap').carousel({
  • 40.
    	slider: '.slider',
  • 41.
    	slide: '.slide',
  • 42.
    	slideHed: '.slidehed',
  • 43.
    	nextSlide : '.next',
  • 44.
    	prevSlide : '.prev',
  • 45.
    	addPagination: false,
  • 46.
    	addNav : false,
  • 47.
    	speed: 500 // ms.
  • 48.
    });
  • 49.
     
  • 50.
    $('.slidewrap2').carousel({ 
  • 51.
    namespace: "carousel2" // Defaults to “carousel”.
  • 52.
    })
  • 53.
     
  • 54.
    $('.slidewrap3').carousel({ 
  • 55.
    namespace: "carousel3" // Defaults to “carousel”.
  • 56.
    })
  • 57.
     
  • 58.
    });
  • 59.
     
  • 60.
     
  • 61.
    4- change it to :
  • 62.
     
  • 63.
    // Carousel slider
  • 64.
    $(document).ready(function() {
  • 65.
    $('.slidewrap').carousel({
  • 66.
    	slider: '.slider',
  • 67.
    	slide: '.slide',
  • 68.
    	slideHed: '.slidehed',
  • 69.
    	nextSlide : '.next',
  • 70.
    	prevSlide : '.prev',
  • 71.
    	addPagination: false,
  • 72.
    	addNav : false,
  • 73.
    	speed: 500 // ms.
  • 74.
    });
  • 75.
     
  • 76.
    $('.slidewrap2').carousel({ 
  • 77.
    namespace: "carousel2" // Defaults to “carousel”.
  • 78.
    })
  • 79.
     
  • 80.
    $('.slidewrap3').carousel({ 
  • 81.
    namespace: "carousel3" // Defaults to “carousel”.
  • 82.
    })
  • 83.
     
  • 84.
    $('.slidewrap4').carousel({ 
  • 85.
    namespace: "carousel4" // Defaults to “carousel”.
  • 86.
    })
  • 87.
     
  • 88.
    });
# first this html code : ================================= <ul class="slider" id="sliderName4"> <li class="slide"> <ul class="items"> <li><a href="#"><img src="images/img/clients/client-1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img/clients/client-2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img/clients/client-3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img/clients/client-4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img/clients/client-5.jpg" alt="" /></a></li> </ul><!-- End items --> </li><!-- End slide --> <li class="slide"> <ul class="items"> <li><a href="#"><img src="images/img/clients/client-1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img/clients/client-2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img/clients/client-3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img/clients/client-4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img/clients/client-5.jpg" alt="" /></a></li> </ul><!-- End items --> </li><!-- End slide --> </ul> ================================= # second this is changes in [ js/custom.js ] file : 1- open file [ js/custom.js ] . 2- search about this code : // Carousel slider $(document).ready(function() { $('.slidewrap').carousel({ slider: '.slider', slide: '.slide', slideHed: '.slidehed', nextSlide : '.next', prevSlide : '.prev', addPagination: false, addNav : false, speed: 500 // ms. }); $('.slidewrap2').carousel({ namespace: "carousel2" // Defaults to “carousel”. }) $('.slidewrap3').carousel({ namespace: "carousel3" // Defaults to “carousel”. }) }); 4- change it to : // Carousel slider $(document).ready(function() { $('.slidewrap').carousel({ slider: '.slider', slide: '.slide', slideHed: '.slidehed', nextSlide : '.next', prevSlide : '.prev', addPagination: false, addNav : false, speed: 500 // ms. }); $('.slidewrap2').carousel({ namespace: "carousel2" // Defaults to “carousel”. }) $('.slidewrap3').carousel({ namespace: "carousel3" // Defaults to “carousel”. }) $('.slidewrap4').carousel({ namespace: "carousel4" // Defaults to “carousel”. }) });

Copy Code to Clipboard Raw

Sign-in or Create a Free Account.

Snippi uses Twitter or Facebook to register and create accounts. Registration will enable you to keep track of your snippets. We never spam your timeline or wall. Ever.

Sign-in with Facebook Sign-in with Twitter