jQuery plug-in Skippr implements focus chart slide effects_jquery

The best jQuery plug-in for focus chart slideshow in history, Skippr, lightweight plug-in, responsive layout plug-in, and powerful parameter customization

Configuration, you can customize the switching speed, switching method, whether to display left and right arrows, whether to automatically play, automatic playback interval and other configurations

Parameters, calling plug-ins are also very simple and easy to use. The calling method is introduced below:

1. Load jQuery and plug-ins

<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>

2.HTML content

<div id="container"> 
    <div id="theTarget"> 
    <div style="background-image: url(img/image1.jpg)"></div> 
    <div style="background-image: url(img/image2.jpg)"></div> 
    <div style="background-image: url(img/image3.jpg)"></div> 
    <div style="background-image: url(img/image4.jpg)"></div> 
   <div style="background-image: url(img/image5.jpg)"></div> 
  </div>   
</div> 

3. Function call

<script> 
 $(document).ready(function(){ 
 
     $("#theTarget").skippr({ 
 
      transition: 'slide', 
      speed: 1000, 
      easing: 'easeOutQuart', 
      navType: 'block', 
      childrenElementType: 'div', 
      arrows: true, 
      autoPlay: false, 
      autoPlayDuration: 5000, 
      keyboardOnAlways: true, 
      hidePrevious: false 
    });       
 
  }); 
</script> 

Parameter configuration explanation

transition: (fade/slide) switching method

speed: switching speed (milliseconds)

easing: switching effect (easeOutQuart)

navType: Below navigation type (block/bubble)

arrows: Whether there are arrows (true/false)

autoPlay: Whether to play automatically (true/false)

autoPlayDuration: Autoplay interval (milliseconds)

keyboardOnAlways: Whether to support keyboard switching (true/false)

hidePrevious: Whether to hide the first switched arrow (true/false)

View DEMO Script download

The above is the entire content of this article, I hope you all like it.