This is multiple thumbnail image slider with bootstrap 4. That is such as client, students, visitors, ranker, employee, product, staff slider example. That is best light weight bootstrap thumbnail slider one by one slider plugin. bootstrap 4 carousel slider with thumbnails. you can use Example : bootstraps multiples images slider, That multi image slider bootstrap in school, company employee, college ranker. That is full screen slider.
Bootstrap multiple image slider
We allows to free Articles of
Our Client Slider With Multiple Images Usign Bootstrap 4
index.html
<!doctype html>
<html lang="en">
<head>
<title>bootstrap 4 multiples image slider with thumbnail navigation - www.pakainfo.com</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.pakainfo.com/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://www.pakainfo.com/assets/animate.css" />
<link rel="stylesheet" href="https://www.pakainfo.com/assets/style.css" />
</head>
<body>
<div class="testimonial-area testimonial-bg ptb-50 parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="section-title text-center title-bottom-center mb-55 text-white">
<h1>our client</h1>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="testimonial-active testimonial-style">
<div class="single-testimonial text-center">
<div class="testimonial-img">
<div class="sub">
<a href="#"><img src="http://www.vivabro.com/en/img/profile/m_001.png" alt="bootstrap thumbnail slider one by one" /> <br> Narendra Modi </a>
</div>
<div class="sub">
<a href="#"><img src="https://i1.wp.com/humanbiologicalmonitoring.eu/wp-content/uploads/2015/05/HOPF_photo.jpg" alt="multiples slider bootstrap" /> <br> Krunal Sisodiya </a>
</div>
<div class="sub">
<a href="#"><img src="http://www.legalwebpro.com/images/user/1401_1500/1417/toohey_brian2011.jpg" alt="image slider in bootstrap" /> <br> Bharat Sakhiya </a>
</div>
<div class="sub">
<a href="#"><img src="http://armstrongmuller.com.au/wp-content/uploads/profils-dmuller-225x300.jpg" alt="bootstrap client slider" /> <br> Ramesh Mehta </a>
</div>
</div>
</div>
<div class="single-testimonial text-center">
<div class="testimonial-img">
<div class="sub">
<a href="#"><img src="http://armstrongmuller.com.au/wp-content/uploads/profils-dmuller-225x300.jpg" alt="multiples image slider" /> <br> Ramesh Mehta </a>
</div>
<div class="sub">
<a href="#"><img src="http://www.legalwebpro.com/images/user/1401_1500/1417/toohey_brian2011.jpg" alt="client carousel bootstrap" /> <br> Bharat Sakhiya </a>
</div>
<div class="sub">
<a href="#"><img src="https://i1.wp.com/humanbiologicalmonitoring.eu/wp-content/uploads/2015/05/HOPF_photo.jpg" alt="client slider" /> <br> Krunal Sisodiya </a>
</div>
<div class="sub">
<a href="#"><img src="http://www.vivabro.com/en/img/profile/m_001.png" alt="client logo slider bootstrap 4" /> <br> Narendra Modi </a>
</div>
</div>
</div>
<div class="single-testimonial text-center">
<div class="testimonial-img">
<div class="sub">
<a href="#"><img src="http://www.legalwebpro.com/images/user/1401_1500/1417/toohey_brian2011.jpg" alt="client slider bootstrap" /> <br> Bharat Sakhiya </a>
</div>
<div class="sub">
<a href="#"><img src="http://www.vivabro.com/en/img/profile/m_001.png" alt="testimonial" /> <br> Narendra Modi </a>
</div>
<div class="sub">
<a href="#"><img src="http://armstrongmuller.com.au/wp-content/uploads/profils-dmuller-225x300.jpg" alt="bootstraps multiples image slider responsive" /> <br> Ramesh Mehta </a>
</div>
<div class="sub">
<a href="#"><img src="https://i1.wp.com/humanbiologicalmonitoring.eu/wp-content/uploads/2015/05/HOPF_photo.jpg" alt="bootstraps multiples image slider" /> <br> Krunal Sisodiya </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.pakainfo.com/assets/jquery-1.12.0.min.js"></script>
<script src="https://www.pakainfo.com/assets/owl.carousel.min.js"></script>
<script src="https://www.pakainfo.com/assets/wow.min.js"></script>
<script src="http://northpointplus.com/thecodehunter/education/js/bootstrap-select.min.js"></script>
<script src="https://www.pakainfo.com/assets/jquery.counterup.min.js"></script>
<script src="https://www.pakainfo.com/assets/jquery.sticky.js"></script>
<script src="https://www.pakainfo.com/assets/jquery.parallax-1.1.3.js"></script>
<script src="https://www.pakainfo.com/assets/main.js"></script>
</body>
</html>
CSS Part
.ptb-5{
padding-top: 5px;
padding-bottom: 5px;
}
@-webkit-keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.blink{
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
}
.social-media a{
height: 30px;
width: 30px;
line-height: 30px;
}
.header-right span,
.logo a span{
color: #F76518;
}
.mainmenu ul.nav.navbar-nav li.active a, .mainmenu ul.nav.navbar-nav li a:hover{
background-color: #F76518;
}
.header-right{
padding: 18px 0px;
font-weight: bold;
font-size: 32px;
line-height: 32px;
float: right;
}
.is-sticky .mainmenu ul.nav.navbar-nav li:hover a,
.is-sticky .mainmenu ul.nav.navbar-nav li.active a{
color: #fff;
}
.is-sticky .mainmenu ul.nav.navbar-nav li a{
color: #333;
}
.is-sticky .header-bottom-area{
background-color: #fff;
box-shadow: 0px 0px 10px 0px #333;
}
.note-bg-one,
.note-bg-three{
background-color: rgba(247, 101, 24, 0.7);
}
.footer-contact li i,
.testimonial-content a h3 span,
.slider-content h1 span{
color: #F76518;
}
.slider-content a.read-more:hover{
background-color: #F76518;
border-color: #F76518;
}
a#scrollUp,
.event-date,
.news-style .owl-controls .owl-nav div,
.event-style .owl-controls .owl-nav div,
.single-instructor:hover .instructor-content,
.title-bottom-left:before,
.title-bottom-center:before,
.title-bottom-left:after,
.title-bottom-center:after,
.choose-icon:after{
background-color: #F76518;
}
.instructor-social a{
border-color: #F76518;
}
.choose-icon{
border-color: #333;
}
.copy-right span i,
.counter-icon i,
a.learn-more,
.call-to-action button,
.title-bottom-center i,
.title-bottom-left i{
color: #F76518;
}
.instructor-social a:hover,
a:hover.learn-more{
background:#F76518;
border-color:#F76518;
}
.testimonial-img{
width: 960px;
height: 250px;
padding: 0px 3px;
}
.testimonial-img .sub{
width: 25%;
float: left;
text-align: center;
}
.testimonial-img .sub img{
margin-left: 20px;
width:200px;
height: 200px;
}
.testimonial-img .sub a{
color: #fff;
}
.choose-icon img{
padding-left: 35px;
}
.choose-icon:after{
width: 85px;
height: 85px;
top: 0px;
}
.choose-icon{
width: 105px;
height: 105px;
}
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Our Client Slider With Multiples Image Usign Bootstrap 4.
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.
Related FAQ
Here are some more FAQ related to this Article: