Background Image Slider Using jQuery & CSS3

The “Slicarousel” is a background image slider that builds with jQuery and CSS3. It’s responsive and allows you to create a beautiful carousel with next/previous buttons.

This slideshow is perfect if you want to define the images as the background instead of using the img tag itself. Its quite easy to add the images and you can define them through CSS file.

This background slideshow comes to both the next/previous and dot navigation system. This makes the user to easily navigate through each slide.

Basically, the slider comes with a placeholder background color which you can easily change. All you need to define the images URL in the CSS by using the background-image property and you are done.

Furthermore, the plugin already has some handy options that allow you to easily customize the photo slider. You can easily create a div based or fullscreen image slider for the background.

It works well on mobile and desktop devices and also allows you to create a slideshow for content.

How to Create Background Image Slider

Let’s start implementation the background slider by adding the jQuery, Javascript and It’s stylesheet file into head tag.

<!-- 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>

The next step to create the HTML which is quite easy and simple. You simply need to define a div container and place a child element with class name the_slider.

You don’t need any of the <img> tags. The slider will automatically get the images from CSS. So you will need to add the images as background in the CSS File. I will guide you about it in the next step.

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

After that, now we will style the slider and see how we can add the image as background in the slider. First, we will style the container and apply some basic CSS.

Just the thing to be noted is a height that you can set and change as per your need.

Similar, we will do some styling for child element which is the_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
}

Now the most important part to define the images as a background.  The class .s_slide_X helps you to define the unlimited images as a background.

Whereas the “X” is the number you need to define for each image. You need to define the image by using the background-image property.

Let’s have a look at how we can add multiple images.

.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');
}

The Javascript

Its time to initialize the jQuery and decide how many slides you want to build. You can create as many as you want. Simply need to pass the number value to nbr_slides.

The plugin will dynamically generate the unique class name for each slider which you can use in the CSS and can add the image.

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

Configuration Options & Settings

The following are some advanced 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
            },
});

That’s It. Hope you like this slider and its useful for you.