Author: | Lorengamboa |
---|---|
Views Total: | 676 views |
Official Page: | Go to website |
Last Update: | May 10, 2018 |
License: | MIT |
Preview:

Description:
SMSlider is a simple yet configurable slider JavaScript plugin for creating your own carousels on the web app.
Features:
- Autoplay
- Vertical or horizontal sliding.
- Pagination and navigation controls.
- Allows to slide through slides via mouse drag.
- Thumbnails navigation.
- Easing functions.
- Supports any elements not only images.
How to use it:
Insert the bundled JavaScript file into the document.
<script src="sm_slider.js"></script>
The html structure for the slider.
<div id="mySlider"> <div> Text slide </div> <div> <img src="1.jpg" alt=""> </div> <div> <img src="2.jpg" alt=""> </div> </div>
Initialize the slider and specify the container element.
var instance = new SMSlider({ container: "mySlider" });
Config the slider by passing the following options to the SMSlider
object.
var instance = new SMSlider({ // enables autoplay autoplay : true, // current slide index currentSlide: 0, // shows navigation navigator : true, // shows pagination dots : true, // background color background: '#eff1f4', // how many slides per view slidesInView: 1, // is swipeable? swipeable: true, // in seconds sliderTransitionTime: 2, // or 'vertical' direction: 'horizontal', // border property border: 'none', // enables thumbnails navigation thumbnails: false, // how many thumbnails per view thumbnailsInView: 3, // 'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out' transitionFlow: 'ease' });
Available API methods to control the slider programmatically.
// display a specific slide instance.displaySlide(index) // backs previous one instance.moveSlideBackward() // go to next one instance.moveSlideForward()