Image caption 1
Image caption 2
Image caption 3
Image caption 4

- Fully responsive
- Slides can contain images, video, or HTML content
- Advanced touch / swipe support built-in
- Callback API
- Can be paused while hovering slideshow
- Small file size, fully themed, simple to implement
- Full screen mode
- Parallax mode
- Browser support: Firefox, Chrome, Safari, iOS, Android, IE10+
- Tons of configuration

## Basic Usage

Load the jQuery javascript and LoopSlider plugin's files on the page. Requires jQuery 1.12.0 or higher, dosen't work with the slim build.

    <link rel="stylesheet" href="../loopslider.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="../jquery.loopslider.js"></script>

Wrap the HTML elements in a DIV container.

    <div class="slider-container">
    	<figure>
    		<img src="images/i1.jpg" alt="">
    		<figcaption>Image caption 1</figcaption>
    	</figure>
    	<figure>
    		<img src="images/i2.jpg" alt="">
    		<figcaption>Image caption 2</figcaption>
    	</figure>
    	<figure>
    		<img src="images/i3.jpg" alt="">
    		<figcaption>Image caption 3</figcaption>
    	</figure>
    </div>

Call the plugin with basic settings

    $(function(){
    	$('.slider-container').loopslider({
    		autoplay: true
    		,visibleItems: 1
    		,step: 1
    		,pagination: true
    	});
    });

Image caption 1
Image caption 2
Image caption 3
Image caption 4
Image caption 5
Image caption 6
Image caption 7
Image caption 8
Image caption 9

## Parallax mode

Set your images as background of slide elements

    <div class="slider-container">
    	<figure style="background-image: url(images/ih1.jpg); min-height: 300px;">
    		<figcaption class="card-body">Image caption 1</figcaption>
    	</figure>
    	<figure style="background-image: url(images/ih2.jpg); min-height: 300px;">
    		<figcaption class="card-body">Image caption 2</figcaption>
    	</figure>
    	<figure style="background-image: url(images/ih3.jpg); min-height: 300px;">
    		<figcaption class="card-body">Image caption 3</figcaption>
    	</figure>
    </div>

Call the plugin with `parallax` setting

    $(function(){
    	$('.slider-container').loopslider({
    		visibleItems: 1
    		,pagination: true
    		,navigation: true
    		,parallax: {
    			/*
    			 * Selector for an element which contains background image.
    			 * '>*' is default value and corresponds to a root slide element
    			 */
    			e: '>*'
    			/*
    			 * Index of background shift (1 is default).
    			 * Might be in range from 0.1 to 1
    			 */
    			,index: .8
    		}
    	});
    });

Image caption 1
Image caption 2
Image caption 3

## Available settings

    $('.slider-container').loopslider({
    	visibleItems: 3 // Amount for slides showing in window at once
    	,step: 1 // Amount of slides scrolling each time
    	,gap: 30 // Margin between each slide (in px)
    	,slideDuration: 400 // Slide transition duration (in ms)
    	,easing: 'swing' // "swing" or "linear", more easing jqueryui.com/easing/
    	,autoplay: false // Auto play slides
    	,autoplayInterval: 3000 // Delay between slides
    	,stopOnHover: false // Stop slideshow on mouse over
    	,touchSupport: true // Handling swipe gestures
    	,responsive: {
    		480: {visibleItems: 1,step: 1}
    		,760: {visibleItems: 3,step: 3}
    		,1000: {visibleItems: 4,step: 3}
    	}
    	,fullscreen: false  //If true sets the height of the slides equal of a viewport height
    	,parallax: null

    	// Controls
    	,pagination: true
    	,navigation: true // prev and next buttons
    	,prevButton: '#prev' // CSS selector for element used to populate the "Prev" control
    	,nextButton: '#next' // CSS selector for element used to populate the "Next" control
    	,stopButton: '#stop' // CSS selector for element used to populate the "Stop" control
    	,playButton: '#play' // CSS selector for element used to populate the "Play" control

    	// Callbacks
    	,onStop: function(){ /* your code here */ }
    	,onPlay: function(){ /* your code here */ }
    	,onMove: function(index, $element, direction){ /* your code here */ }
    });

file_download Download on GitHub