jQuery Image Slideshow With A Cool Slider Control - sampSlider

sampSlider is a jQuery slideshow/carousel plugin to cycle through a list of images through a bottom slider control that supports both& mouse drag and touch swipe.

How to use it:

1. Include the sampslider.css in the header for the basic slideshow styles.

<link href="sampslider.css" rel="stylesheet">

2. Load the sampslider.js after your jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="sampslider.js"></script>

3. Create a list of images and insert them into the slideshow as follow.

<div id="demo" class="samp-slider samp-slider-mask">    
  <ul class="samp-container-horizontal">
    <li class="samp-container"><img src="slides/1.jpg"></li>
    <li class="samp-container"><img src="slides/2.jpg"></li>
    <li class="samp-container"><img src="slides/3.jpg"></li>
    <li class="samp-container"><img src="slides/4.jpg"></li>
    <li class="samp-container"><img src="slides/5.jpg"></li>
    <li class="samp-container"><img src="slides/6.jpg"></li>
  </ul>
</div>

4. Call the plugin on the parent container to initialize the slideshow.

$('#demo').sampSlider({
  // OPTIONS HERE
});

5. All the default options.

$('#demo').sampSlider({

// auto size images
autosize: true,

// width of the slideshow
width: 900,

// width overrides height with aspect ratio
height: 600,

// overrides autosize. when false it is calculated
aspectratio: false,

// 0 or delay in milliseconds
autoplay: 0,

// true to show drag-navi
dragonbar:false,

// true to show arrows navigation
arrows:true,

// infinite loop
loop: true,

// slide speed
slidespeed: 500,

// 1 and up
startslide: 1,

// if automatically scroll to top of slider
gototop: false, 

// called before image switch 
beforeslide: null,

// called after image switch
afterslide: null,

// callback
afterinit: function(){
  console.log('Vroom.');
}

});

Change log:

2018-08-18

• Added afterslide and beforeslide functions - null by default

2015-03-02

• New Icons - improved functionality

---

This awesome jQuery plugin is developed by TheSamp. For more Advanced Usages, please check the demo page or visit the official website.