Today, We want to share with you bootstrap 4 testimonial slider example.In this post we will show you bootstrap 4 carousel multiple items, hear for bootstrap carousel slider with thumbnails we will give you demo and example for implement.In this post, we will learn about news slider bootstrap with an example.
Bootstrap 4 testimonial carousel slider with autoplay Example
HTML Code
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body class="bg-info">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 col-10 offset-1 mt-5">
<h2 class="text-center mt-5 mb-5 pb-2 text-uppercase text-dark"><strong>Testimonials</strong></h2>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner mt-4">
<div class="carousel-item text-center active">
<div class="img-box p-1 border rounded-circle m-auto">
<img class="d-block w-100 rounded-circle" src="http://www.pakainfo.com/demo/account-1.jpg" alt="Tamilrokers slide">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Paul Mitchel</strong></h5>
<h6 class="text-dark m-0">Web Developer</h6>
<p class="m-0 pt-3 text-white">Tamilrockers is a torrent website that is immensely popular among south Indian movie fans.</p>
</div>
<div class="carousel-item text-center">
<div class="img-box p-1 border rounded-circle m-auto">
<img class="d-block w-100 rounded-circle" src="http://www.pakainfo.com/demo/account-3.jpg" alt="Tamilrokers slide">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Steve Fonsi</strong></h5>
<h6 class="text-dark m-0">Web Designer</h6>
<p class="m-0 pt-3 text-white">Tamilrockers.com is a torrent website which provides illegal download and streaming of content such as Tamil, Telugu, Malayalam and Bollywood movies.</p>
</div>
<div class="carousel-item text-center">
<div class="img-box p-1 border rounded-circle m-auto">
<img class="d-block w-100 rounded-circle" src="http://www.pakainfo.com/demo/account-7.jpg" alt="Tamilrokers slide">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Daniel vebar</strong></h5>
<h6 class="text-dark m-0">Seo Analyst</h6>
<p class="m-0 pt-3 text-white">Tamilrockers is a website that allows visitors to download pirated movies.</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code
body{
font-family: 'Lato', sans-serif;
}
h2{
position: relative;
}
h2::after{
content: "";
width: 130px;
position: absolute;
margin: 0 auto;
height: 3px;
background: #FFC107;
left: 0;
right: 0;
bottom: -10px;
}
.carousel-inner .carousel-item .img-box{
width: 135px;
height: 135px;
}
.carousel-control-prev{
left: -100px;
}
.carousel-control-next{
right: -100px;
}
.carousel-indicators{
top: 320px;
}
@media (min-width: 320px) and (max-width: 640px) {
.carousel-inner .carousel-item p{
font-size: 14px;
}
.carousel-control-prev{
left: -40px;
}
.carousel-control-next{
right: -40px;
}
.carousel-indicators{
top: 400px;
}
}
I hope you get an idea about bootstrap multiple image slider.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.