content logo

Bootstrap Sliders:

Bootstrap Simple Slider with Purple Background

For when you want to have an image gallery, you can do it with the help of Bootstrap and thumbnails. In this code instead of the points that represent other images. Each small image is located at the bottom of the slider. These images are a bit blurry if not selected. The background of this slider is purple. This slider has no text. There are buttons on the right and left of the slider to scroll left and right.

#Free Bootstrap Slider

#HTML Slider with Thumbnails

#HTML Slider Code

#CSS Slider with Background


<!-- This script got from www.frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
                <div class="carousel-inner">
                    <div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
                </div>
                <a class="carousel-control-prev" href="#custCarousel" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span> 
                </a> 
                <a class="carousel-control-next" href="#custCarousel" data-slide="next"> 
                    <span class="carousel-control-next-icon"></span> 
                </a>
                <ol class="carousel-indicators list-inline">
                    <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
                </ol>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    background-color: #7B1FA2
}
.container {
    margin-top: 10px;
    margin-bottom: 100px
}
.carousel-inner img {
    width: 100%;
    height: 100%
}
#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px
}
#custCarousel .carousel-indicators>li {
    width: 100px
}
#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}
#custCarousel .carousel-indicators li.active img {
    opacity: 1
}
#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}
.carousel-item img {
    width: 80%
}
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
<style>
body {
    background-color: #7B1FA2
}
.container {
    margin-top: 10px;
    margin-bottom: 100px
}
.carousel-inner img {
    width: 100%;
    height: 100%
}
#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px
}
#custCarousel .carousel-indicators>li {
    width: 100px
}
#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}
#custCarousel .carousel-indicators li.active img {
    opacity: 1
}
#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}
.carousel-item img {
    width: 80%
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
                <div class="carousel-inner">
                    <div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
                </div>
                <a class="carousel-control-prev" href="#custCarousel" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span> 
                </a> 
                <a class="carousel-control-next" href="#custCarousel" data-slide="next"> 
                    <span class="carousel-control-next-icon"></span> 
                </a>
                <ol class="carousel-indicators list-inline">
                    <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
                </ol>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview