Background Image Slider with jQuery and CSS3

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Slicarousel
Author:	Vincent Mancini
Licence:	MIT Licence
Published:	January 17, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	49 KB

Demo Download

How to Create Background Image Slider

1. To create a background image slider / carousel, first download this project and include Slicarousel plugin’s CSS and JavaScript file (just after jQuery) into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Slicarousel CSS -->
<link rel="stylesheet" href="css/slicarousel.css">

<!-- Slicarousel JS -->
<script src="js/slicarousel.js"></script>

2. After that, create a container (a div element) and place another div in it with class name "the_slider". The image slider will be created in this div. Place this container where you want to build slider.

<div class="container">
   <div class="the_slider">
			
   </div>
</div>

3. Now, decide how many slides you want to create. You may create slides for your background images as many as you need. You just need to pass the number value in plugin configuration, then the slides will be generated dynamically with unique class name. After that, you can set background image for each slide in CSS.

For example you want to create 4 slides in carousel. So, initialize the plugin in jQuery document ready function and define number of slides.

$(document).ready(function(){
	
   $(".the_slider").slicarousel({
      nbr_slides: 4,
   });
	
});

4. Its time to style your carousel. So, add some CSS styles for container and slider and at the end, define the URL of background images. These images will be used in your slider.

.container{
    display: block;
    width: 90%;
    margin: 0 auto;
    height: 350px;
    position: relative;
}

.the_slider{
    display: block;
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.the_slider .s_slide{
    display: block;
    width: 100%;
    height: 100%;
    float: left;
    background-repeat: no-repeat;
}

.the_slider .s_slider_container{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.the_slider .s_slider_container:active{
    cursor: -webkit-grabbing
}

.the_slider .s_slide_0{
    background-image: url('https://source.unsplash.com/600x300/?evening');
}

.the_slider .s_slide_1{
    background-image: url('https://source.unsplash.com/600x300/?lake');
}

.the_slider .s_slide_2{
    background-image: url('https://source.unsplash.com/600x300/?girl');
}

.the_slider .s_slide_3{
    background-image: url('https://source.unsplash.com/600x300/?snow');
}

Note: .s_slide_0 define your first slide. Jut enter the path of your image.

.the_slider .s_slide_0{
    background-image: url('path/to/image.jpg');
}

Advance Configuration Options for Background Image Slider

The following are some advance configuration options to create / customize “background image slider”.

$(".the_slider").slicarousel({
   nbr_slides: 6,
});

$(".the_slider").slicarousel({
   class_name_prefix: "s_",
});

$(".the_slider").slicarousel({
   arrows: true,
});

$(".the_slider").slicarousel({
   dot_nav: true,
});

$(".the_slider").slicarousel({
   full_width: true,
});

$(".the_slider").slicarousel({
   delay: 2500,
});

$(".the_slider").slicarousel({
   speed: 'normal',
});

$(".the_slider").slicarousel({
    "autoplay": {
                "enabled": true, // Enable autoplay slider
                "direction": "ltr" // direction right to left rtl or left to right ltr
            },
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.