Simple Slider 2.0

Create a beautiful responsive carousel slider.

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.

Installation

We’ll be happy to help you!

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) 
            
        

Examples

We’ll be happy to show you!

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:

Enjoy it!