Infinite Any Content Slider Plugin For jQuery - infiniteSlider2
File Size: | 263 KB |
---|---|
Views Total: | 5563 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
infiniteSlider2 is a responsive, customizable, infinitely scrolling slider / carousel plugin for jQuery that works with any types of web content and comes with tons of configuration options.
View more:
How to use it:
1. Create a group of web contents (text, images, etc) for the slider.
<div id="infinite-slider2"> <div> <h1>slide #1</h1> </div> <div> <h1>slide #2</h1> </div> <div> <h1>slide #3</h1> </div> <div> <h1>slide #4</h1> </div> <div> <h1>slide #5</h1> </div> </div>
2. Import both jQuery library and the 'infiniteSlider2.js' script into the webpage.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="js/infiniteSlider2.js"></script>
3. Active the slider by calling the function on the top container.
$('#infinite-slider2').infiniteSlider2();
4. Config the slider with the following options.
$('#infinite-slider2').infiniteSlider2({ // general defaults width: 100, height: 'auto', arrows: true, toggles: true, labels: true, // slide background defaults slideBackgroundColor: [ '#5eabe7', '#cca27e', '#7e4c39', '#83595e', '#2e2432' ], slideBackgroundImage: [], // arrow defaults arrowWidth: 32, arrowHeight: 76, arrowMargin: 20, arrowBackgroundColor: '', arrowBackgroundImageRight: '', arrowBackgroundImageLeft: '', arrowFill: 'white', arrowOpacity: 0.4, arrowAnimate: true, // toggle defaults toggleShape: 'circle', toggleWidth: 16, toggleHeight: 16, toggleGutter: 8, toggleOpacity: 1, toggleColor: '', toggleActiveColor: '', toggleBorder: '3px solid rgba(255, 255, 255, 0.4)', toggleActiveBorder: '3px solid white', toggleMargin: 30, toggleAnimate: true, // label defaults slideLabelWidth: 74, slideLabelHeight: 74, slideLabelBorderWidth: 3, slideLabelBorderStyle: 'solid', slideLabelBorderColor: 'rgba(255, 255, 255, 0.4)', slideActiveLabelBorderColor: 'white', slideLabelBackgroundColor: [ '#5eabe7', '#cca27e', '#7e4c39', '#83595e', '#2e2432' ], slideLabelImage: [], // advanced defaults autoplay: true, slideInterval: 6000, slideDuration: 600, cursor: 'pointer' });
Change log:
v2.0.4 (2017-03-22)
- JS update
v2.0.3 (2017-03-14)
- JS update
v2.0.2 (2017-02-23)
- JS update
v2.0.1 (2017-02-15)
- JS update
This awesome jQuery plugin is developed by a-matsevich. For more Advanced Usages, please check the demo page or visit the official website.