Author: | michu2k |
---|---|
Views Total: | 7,886 views |
Official Page: | Go to website |
Last Update: | October 7, 2019 |
License: | MIT |
Preview:

Description:
SimpleSlider is a generic responsive slider/carousel plugin with JavaScript that has the ability to slides through any HTML contents at a certain speed.
How to use it:
Include the style sheet ‘simpleSlider.min.css’ in the head section, and the JavaScript file simpleSlider.min.js right before the closing body tag.
<link rel="stylesheet" href="dist/simpleSlider.min.css"> <script src="dist/simpleSlider.min.js"></script>
The html structure for the slider.
<div class="simple-slider simple-slider-demo"> <div class="slider-wrapper"> <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')"> First slide </div> <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')"> Second slide </div> <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')"> Third slide </div> </div> <div class="slider-btn slider-btn-prev"></div> <div class="slider-btn slider-btn-next"></div> </div>
Initialize the slider and done.
var slider = new simpleSlider('.simple-slider-demo');
Customize the transition duration in milliseconds.
var slider = new simpleSlider('.simple-slider-demo',{ speed: 6000 });
Set the delay between transitions in milliseconds.
var slider = new simpleSlider('.simple-slider-demo',{ delay: 5000 });
Enable/disable the autoplay functionality.
var slider = new simpleSlider('.simple-slider-demo',{ autoplay: true });
Enable/disable infinite loop.
var slider = new simpleSlider('.simple-slider-demo',{ loop: true });
Specify the number of slides per view.
var slider = new simpleSlider('.simple-slider-demo',{ slidesPerView: { 768: 2, // 2 slides for viewport >= 768px 1024: 3 // 3 slides for viewport >= 1024px } });
Callback functions.
var slider = new simpleSlider('.simple-slider-demo',{ // called after initialization onInit: () => {}, // called after slide change onChange: () => {} });
Default CSS classes.
var slider = new simpleSlider('.simple-slider-demo',{ classes: { wrapper: 'slider-wrapper', // wrapper class {string} slide: 'slider-slide', // slide class {string} buttons: 'slider-btn', // buttons class {string} pagination: 'slider-pagination', // pagination class {string} paginationItem: 'pagination-bullet', // pagination bullet class {string} } });
Changelog:
v1.9.0 (10/07/2019)
- Fixed pagination in IE
v1.8.0 (05/03/2019)
- Added new option: enableDrag
- Added new option: slidesPerView
- Added new option: onChange
- Added new page with several demos
- Changed default speed to 600
- Changed default delay to 5000
- Changed bullet active class to the ‘is-active’
- Various tweaks and fixes
v1.7.2 (09/08/2018)
- Various fixes
Muy bueno!