Responsive Auto Content Carousel Plugin For jQuery - mkslider
File Size: | 6.49 KB |
---|---|
Views Total: | 1806 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another content carousel slider plugin for jQuery that scrolls automatically and infinitely through all different kinds of content with CSS3 animations and useful controls.
Basic usage:
1. Include jQuery library together with the jQuery mkslider plugin's JS and CSS files on the webpage.
<link rel="stylesheet" href="path/to/jquery.mkslider.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="path/to/jquery.mkslider.js"></script>
2. Add a set of html content to the carousel slider.
<div id="slider"> <div class="slide">1</div> <div class="slide">2</div> <div class="slide">3</div> <div class="slide">4</div> <div class="slide">5</div> </div>
3. Create a pagination for the carousel slider.
<nav id="additional-menu"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </nav>
4. Initialize the carousel slider with default options.
$('#slider').mkslider({ externalNavigator: '#additional-menu' });
5. Full plugin options to customize your carousel slider.
$('#slider').mkslider({ // autoplay auto: true, // autoplay interval autoTimeout: 2000, // display play / pause icons autoIcon: true, autoIconPlay: '►', autoIconPause: '▮▮', // animation speed animationTime: 1000, animationPerSlide: true, // display arrows navigation arrows: true, arrowNext: '→', arrowPrev: '←', // display bottom navigation navigator: true, navigatorItemText: '●', externalNavigator: '', });
This awesome jQuery plugin is developed by charger88. For more Advanced Usages, please check the demo page or visit the official website.