SimpleSlider
Simple responsive slider created in pure javascript.
Browsers support: All modern browsers, Internet Explorer 10+
Version
1.9.0
Installation
npm
Install the package & import files
npm install simpleslider-js
import SimpleSlider from 'simpleslider-js';
import 'simpleslider-js/dist/simpleslider.min.css';CDN
Include files using CDN.
https://unpkg.com/[email protected]/dist/simpleSlider.min.js
https://unpkg.com/[email protected]/dist/simpleSlider.min.css
Github
You can also download files from Github and attach them manually to your project.
Note: On production use files (JS and CSS) only from dist/ folder.
<link rel="stylesheet" href="css/simpleSlider.min.css">
<script src="js/simpleSlider.min.js"></script> Usage
Include files
See the section above.
Create HTML layout
<div class="simple-slider simple-slider-first">
<div class="slider-wrapper">
<!-- First slide -->
<div class="slider-slide" style="background-image: url('path/to/image')">
<!-- Any HTML content -->
</div>
<!-- Second slide -->
<div class="slider-slide" style="background-image: url('path/to/image')">
<!-- Any HTML content -->
</div>
<!-- Third slide -->
<div class="slider-slide" style="background-image: url('path/to/image')">
<!-- Any HTML content -->
</div>
</div>
<!--Pagination (Not required)-->
<div class="slider-pagination"></div>
<!-- Buttons (Not required) -->
<div class="slider-btn slider-btn-prev"></div>
<div class="slider-btn slider-btn-next"></div>
</div>Initialize the module
<script>
new SimpleSlider('.simple-slider-first');
</script>API
Example
new SimpleSlider(container, options)
- container - string (required), selector of slider container
- options - object (optional), slider options
You can initialize more than one slider per page.
<script>
// Default options
new SimpleSlider('.simple-slider-first');
// User options
new SimpleSlider('.simple-slider-second', {
speed: 600,
autoplay: false,
class: {
wrapper: 'slider-wrapper'
},
onChange: function() {
console.log('Slide changed !');
}
});
// SlidesPerView example
new SimpleSlider('.simple-slider-third', {
slidesPerView: {
768: 2, // 2 slides for viewport >= 768px
1024: 3 // 3 slides for viewport >= 1024px
}
});
// Access to other slider functions and properties
var slider = new SimpleSlider('.simple-slider-third');
console.log(slider);
</script>Options
| Option | Type | Default value | Description |
|---|---|---|---|
| speed | number | 600 | Transition duration in ms |
| delay | number | 5000 | Delay between transitions in ms (autoplay) |
| enableDrag | boolean | true | Enable drag option |
| autoplay | boolean | false | Slider autoplay |
| loop | boolean | true | Slider loop |
| slidesPerView | object | 1 | The number of slides to be shown [Read more below] |
| class:wrapper | string | 'slider-wrapper' | Wrapper class |
| class:slide | string | 'slider-slide' | Slide class |
| class:buttons | string | 'slider-btn' | Buttons class |
| class:pagination | string | 'slider-pagination' | Pagination class |
| class:paginationItem | string | 'pagination-bullet' | Pagination bullet class |
| onInit | function | - | Function called after slider initialization |
| onChange | function | - | Function called when the slide change start |
Other functions and properties
.attachEvents() - Attach all events
.detachEvents() - Detach all events
.nextSlide() - Go to the next slide
.prevSlide() - Go to the previous slide
.index - Get current slide index
.wrapper - Slider wrapper
.container - Slider container
.buttons - Slider buttons
.slides - List of slides
.slidesWithClones - List of slides with clones
.paginationBullets - List of pagination bullets
Comments
slidesPerView - Number of slides can't be bigger than the amount of slides in the slider.