Animated Bootstrap image slider using HTML and JavaScript

In this Tutorial, We learn How to Create a simple animated image slider using HTML, CSS, and JavaScript.

Today’s world websites are in demand and the slider makes a huge impact on the website. We create the design in which the user can easily understand what are our services and make his/her website good. In this, we explain a simple animated slider step by step.

Slider has the background image, text, and image which comes in animated style.

Let’s Make animated bootstrap image slider with HTML code :

Step1: Image Folder/Url

Create an image folder or pass the URL as shown in index.html. Make sure that all the images are in the same width*height (size) and Otherwise, the slider will misbehave while navigating between slides and it looks untidy.

Step2:Index.html

Copy code and simply paste the code.

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Full Width And Auto Animated Slider </title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="http://aaditritechnology.com/js/jssor-script.js"></script>
</head>
<body>
    <div class="clearfix"></div>
    <div class="content-wrap">
        <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:-1px;width:980px;height:405px;overflow:hidden;visibility:hidden;">
            <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:405px;overflow:hidden;">
                <div data-b="0"> <img data-u="image" src="http://developerguidance.com/wp-content/uploads/2020/05/New-Project.jpg" alt="" />
                    <div style="position:absolute;top:77px;left:460px;width:460px;height:210px;z-index:0;"> <img data-u="caption" data-t="0" style="position:absolute;top:-330px;left:30px;width:390px;height:300px;z-index:0;" src="http://developerguidance.com/wp-content/uploads/2020/05/Key-Features.jpg" ></div>
                    <div data-u="caption" data-t="3" data-to="0% 100%" style="position:absolute;top:300px;left:-100px;width:257px;height:127px;z-index:0;">
                        <div style="position:absolute;top:4px;left:34px;width:300px;height:250px;z-index:0;overflow:hidden;"> <span style="color:#000; font-size:100%;">The Figure Speaks About Our Leadership.<br>
          Take the Advantage of our 10year+ Experience</span>
                            <ul style="color:#000; font-size:120%; margin-top:20px;">
                                <li style="margin-bottom:10px;"><strong style="font-weight:900; font-size:170%; vertical-align:middle;">300+</strong> Website Launch</li>
                                <li style="margin-bottom:10px;"><strong style="font-weight:900; font-size:170%; vertical-align:middle;">200+</strong> BlogsBy Developer Guidance</li>
  

                            </ul>
                        </div>
                    </div>
                    <a href="#" target="_blank" style="display:block; position:absolute;top:22px;left:600px;width:320px;height:36px;z-index:0;font-size:22px;color:#ffffff;line-height:1.64;"></a>
                </div>
                
                <div data-b="0"> <img data-u="image" src="http://developerguidance.com/wp-content/uploads/2020/05/Digital-Next-Digital-Marketing-Agency-Hero-Background-1024x373-1.png" alt="digital marketing services" />
                    <div style="position:absolute;top:77px;left:460px;width:460px;height:210px;z-index:0;"> <img data-u="caption" data-t="0" style="position:absolute;top:-330px;left: 210px; width: 250px;height:270px;z-index:0;" src="http://developerguidance.com/wp-content/uploads/2020/05/digi.png" alt="social media marketing" /></div>
                    <div data-u="caption" data-t="3" data-to="0% 100%" style="position:absolute;top:300px;left:-100px;width:257px;height:127px;z-index:0;">
                        <div style="position:absolute;top:4px;left:34px;width:300px;height:250px;z-index:0;overflow:hidden;"> <span style="color:#fff;font-size: 286%;">Digital <strong style="color:#FF0">Market</strong> Solutions By Developer Guidance</span></div>
                    </div>
                    <a href="#l" target="_blank" style="display:block; position:absolute;top:22px;left:600px;width:320px;height:36px;z-index:0;font-size:22px;color:#ffffff;line-height:1.64;"></a>
                </div>
                
               
               
            </div>
            <div data-u="navigator" class="jssorb101" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
                <div data-u="prototype" class="i" style="width:16px;height:16px;">
                    <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                        <circle class="co" cx="8000" cy="8000" r="5000"></circle>
                        <circle class="ci" cx="8000" cy="8000" r="3000"></circle>
                    </svg>
                </div>
            </div>
            <div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
                </svg>
            </div>
            <div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
                </svg>
            </div>
        </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Full Width And Auto Animated Slider </title>

</head>

<body>

<div style="position:absolute;top:4px;left:34px;width:300px;height:250px;z-index:0;overflow:hidden;"> <span style="color:#000; font-size:100%;">The Figure Speaks About Our Leadership.<br>

Take the Advantage of our 10year+ Experience</span>

<li style="margin-bottom:10px;"><strong style="font-weight:900; font-size:170%; vertical-align:middle;">300+</strong> Website Launch</li>

<li style="margin-bottom:10px;"><strong style="font-weight:900; font-size:170%; vertical-align:middle;">200+</strong> BlogsBy Developer Guidance</li>

</ul>

</div>

</div>

<div style="position:absolute;top:4px;left:34px;width:300px;height:250px;z-index:0;overflow:hidden;"> <span style="color:#fff;font-size: 286%;">Digital <strong style="color:#FF0">Market</strong> Solutions By Developer Guidance</span></div>

</div>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</body>

</html>

Step3: Add CSS Code

Css

CSS

.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes jssorl-009-spin {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.jssorb101 .i {
    position: absolute;
    cursor: pointer
}

.jssorb101 .i .ci {
    fill: #000
}

.jssorb101 .i .co {
    fill: #fff;
    opacity: .3
}

.jssorb101 .i:hover .co {
    fill: #f93;
    opacity: 1
}

.jssorb101 .i:hover .ci {
    fill: #fff
}

.jssorb101 .iav .ci {
    fill: #fff;
    stroke-width: 0
}

.jssorb101 .iav .co {
    fill: #46d1d3;
    opacity: 1
}

.jssorb101 .i.idn {
    opacity: .3
}

.jssora051 {
    display: block;
    position: absolute;
    cursor: pointer
}

.jssora051 .a {
    fill: none;
    stroke: #fff;
    stroke-width: 360;
    stroke-miterlimit: 10
}

.jssora051:hover {
    opacity: .8
}

.jssora051.jssora051dn {
    opacity: .5
}

.jssora051.jssora051ds {
    opacity: .3;
    pointer-events: none
}

.jssorl-009-spin img {

animation-name: jssorl-009-spin;

animation-duration: 1.6s;

animation-iteration-count: infinite;

animation-timing-function: linear

}

@keyframes jssorl-009-spin {

from {

transform: rotate(0)

}

to {

transform: rotate(360deg)

}

.jssorb101 .i {

position: absolute;

cursor: pointer

}

.jssorb101 .i .ci {

fill: #000

}

.jssorb101 .i .co {

fill: #fff;

opacity: .3

}

.jssorb101 .i:hover .co {

fill: #f93;

opacity: 1

}

.jssorb101 .i:hover .ci {

fill: #fff

}

.jssorb101 .iav .ci {

fill: #fff;

stroke-width: 0

}

.jssorb101 .iav .co {

fill: #46d1d3;

opacity: 1

}

.jssorb101 .i.idn {

opacity: .3

}

.jssora051 {

display: block;

position: absolute;

cursor: pointer

}

.jssora051 .a {

fill: none;

stroke: #fff;

stroke-width: 360;

stroke-miterlimit: 10

}

.jssora051:hover {

opacity: .8

}

.jssora051.jssora051dn {

opacity: .5

}

.jssora051.jssora051ds {

opacity: .3;

pointer-events: none

}

Step 4: Include Js Fil

Put the code in between the <script></script>

Javascript

JavaScript

 jssor_1_slider_init();

1	jssor_1_slider_init();

Step 5: Check Final Output

Now, let’s run the HTML page in the browser and see the output. It looks like as shown below in the image. I provide the link of image in slider, you can change it as per your convenient. Animated bootstrap image slider changes look and feel of your website

We are using jssor slider because we can easily create the animated slider