Simple Slider 2.1

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.1 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="bootstrap.min.css">
            
        

Include JS.

Yep, include jQuery 3.5.1, simpleSlider 2.1 and your own app files before end tag </body>.

            
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 three containers:

            
<div class="container galery"></div>
<div class="container galery2"></div>
<div class="container galery3"></div>
            
        

Add slides collection.

Add to your app.js some collections of images for every slider you need.

Every slide contains "src" and "alt" atributes.

For example, we add two collections:

            
const imgCollection = {
    slide1: ['https://picsum.photos/800', '#'],
    slide2: ['https://picsum.photos/801', '#'],
    slide3: ['https://picsum.photos/802', '#'],
    slide4: ['https://picsum.photos/703', '#'],
    slide5: ['https://picsum.photos/804', '#'],
}

const imgCollection2 = {
    slide1: ['https://picsum.photos/750', '#'],
    slide2: ['https://picsum.photos/751', '#'],
    slide3: ['https://picsum.photos/652', '#'],
    slide4: ['https://picsum.photos/753', '#'],
    slide5: ['https://picsum.photos/754', '#'],
}
            
        

Default settings.

By default Simple Slider 2.1 has next options:

            
//Default settings:
{
    auto: false,
    autoplayInterval: 0,
    animationType: 'fade',
    animationTime: 1500,
}

//Default 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 in next way:

            
let slider = new Slider({
    container: '...class-name of div-container provided for this slider...',
    auto: '...slide show true/false...',
    autoplayInterval: '...time in ms to showing next slide...',
    animationType: '...type of animation fade/carousel/fly...',
    animationTime: '...duration in ms...',
},
imgCollection)
            
        

Examples

We’ll be happy to show you!

Example #1.

Initialization with default settings:

            
let slider = new Slider({
    container: '.galery',
})
            
        

Let's see:

Example #2.

Initialization:

            
let slider2 = new Slider({
    container: '.galery2',
    auto: true,
    autoplayInterval: 3000,
    animationType: 'carousel',
    animationTime: 1500,
},
imgCollection)
            
        

Let's see:

Example #3.

Initialization:

            
let slider3 = new Slider({
    container: '.galery3',
    auto: false,
    autoplayInterval: 2000,
    animationType: 'fly',
    animationTime: 2000,
},
imgCollection2)
            
        

Let's see:

Enjoy it!