Almost all options are responsive and include very intuitive breakpoints settings.
No matter if you are a beginner or an advanced user, starting with SimpleSlider 2.0 is easy.
Include CSS.
First, include Bootstrap 4 CSS files into your HTML head:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
Include JS.
Yep, include simpleSlider_2_0.js and your own app.js before end tag </body>.
<script defer src="simpleSlider_2_0.js"></script>
<script defer src="app.js"></script>
Include HTML.
Create div-container with random class-name for every slider you need at any place of HTML you need.
For example, we created two containers:
<div class="container galery"></div>
<div class="container galery2"></div>
Add slides collection.
Add to your app.js some collection of images (slides).
Every slide contains "src" and "alt" atributes.
For example:
const imgCollection = {
slide1: ['https://picsum.photos/800', '#'],
slide2: ['https://picsum.photos/801', '#'],
slide3: ['https://picsum.photos/802', '#'],
slide4: ['https://picsum.photos/803', '#'],
slide5: ['https://picsum.photos/804', '#'],
}
Default settings.
By default Simple PopUp has next options:
Settigs:
{
auto: false,
time: 0
}
Slide collections (imgCollection):
{
slide1: ['https://picsum.photos/900', '#'],
slide2: ['https://picsum.photos/901', '#'],
slide3: ['https://picsum.photos/902', '#'],
slide4: ['https://picsum.photos/903', '#'],
slide5: ['https://picsum.photos/904', '#'],
}
Call the plugin.
Now initialize function in app.js for every slider:
let slider = new Slider({
container: '...class-name of div-container provided for this slider...',
auto: '...auto-play true/false...',
time: '...time in ms to showing next slide...'
},
imgCollection)
Example #1.
Initialization:
let slider = new Slider({
container: '.galery',
auto: true,
time: 3000
},
imgCollection)
Let's see:
Example #2.
Initialization with default settings:
let slider2 = new Slider({
container: '.galery2',
})
Let's see: