Simple Flexible Content Carousel Plugin with jQuery
File Size: | 143 KB |
---|---|
Views Total: | 1444 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple, lightweight, responsive, flexible jQuery content slider (carousel) plugin that features autoplay, endless loop, arrows & bullets navigation, event callbacks and much more.
Basic usage:
1. Load the Simple jQuery Slider plugin after jQuery JavaScript library.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="simple-jquery-slider.min.js"></script>
2. Wrap your slide content (e.g. images) into a DIV container.
<div id="slide"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> <img src="3.jpg" alt=""> <img src="4.jpg" alt=""> </div>
3. Create a set of links that links to specific slides (Optional).
<div class="links"> <a href="#slide-0">Slide 1</a> <a href="#slide-1">Slide 2</a> <a href="#slide-2">Slide 3</a> <a href="#slide-3">Slide 4</a> </div>
4. Initialize the plugin to create a basic image carousel.
$('#slide').simpleSlide();
5. Lots of options & callback events to customize your content slider.
'page':0, // auto play 'auto':false, // The time between slides in an automated slideshow 'autoTime':4000, // Continue auto after interaction? 'autoInteraction':false, 'interval':false, // arrows navigation 'arrows':true, // bullets navigation 'bullets':false, // The amount of time it takes to transition between slides 'transitionTime':500, // Determines if the slideshow should listen to 'hashchange' event. 'hashChange':true, // Selector string for slide elements 'slideSelector':'.slide', 'count':0, 'container':$(this), //Callbacks 'onInitiate':function(){}, 'onBeforeSlide':function(){}, 'onAfterSlide':function(){}, 'onSlideStart':function(){}, 'onBulletClick':function(){}, 'onArrowClick':function(){}, 'onPreviousClick':function(){}, 'onNextClick':function(){}
This awesome jQuery plugin is developed by loganstellway. For more Advanced Usages, please check the demo page or visit the official website.