This is multiple thumbnail image slider with bootstrap 4. this is like client,ranker,employee,staff slider example. this is best light weight slider plugin. bootstrap 4 carousel slider with thumbnails. you can use this slider in school,college ranker. this is full screen slider.
We allows to free snippets of bootstrap slider with thumbnail navigation , you can download full code of bootstrap multiple image slider layout. Here in this post i will give you example of bootstrap carousel slider with thumbnails snippet and you will get simple code of html, css and jquery. In bootstrap multiple image slider snippet i give you three tab with html, css and js, you can easily get code of in one slide multiple thumbnail images slider layout.
<!doctype html>
<html lang="en">
<head>
<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="//nicesnippets.com/demo/owl.carousel.min.css" />
<link rel="stylesheet" href="//nicesnippets.com/demo/animate.css" />
<link rel="stylesheet" href="//nicesnippets.com/demo/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="testimonial" /> <br> Team Coock </a>
</div>
<div class="sub">
<a href="#"><img src="https://i1.wp.com/humanbiologicalmonitoring.eu/wp-content/uploads/2015/05/HOPF_photo.jpg" alt="testimonial" /> <br> Tom Lisa </a>
</div>
<div class="sub">
<a href="#"><img src="http://www.legalwebpro.com/images/user/1401_1500/1417/toohey_brian2011.jpg" alt="testimonial" /> <br> Win Disal </a>
</div>
<div class="sub">
<a href="#"><img src="http://armstrongmuller.com.au/wp-content/uploads/profils-dmuller-225x300.jpg" alt="testimonial" /> <br> John Fokner </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="testimonial" /> <br> John Fokner </a>
</div>
<div class="sub">
<a href="#"><img src="http://www.legalwebpro.com/images/user/1401_1500/1417/toohey_brian2011.jpg" alt="testimonial" /> <br> Win Disal </a>
</div>
<div class="sub">
<a href="#"><img src="https://i1.wp.com/humanbiologicalmonitoring.eu/wp-content/uploads/2015/05/HOPF_photo.jpg" alt="testimonial" /> <br> Tom Lisa </a>
</div>
<div class="sub">
<a href="#"><img src="http://www.vivabro.com/en/img/profile/m_001.png" alt="testimonial" /> <br> Team Coock </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="testimonial" /> <br> Win Disal </a>
</div>
<div class="sub">
<a href="#"><img src="http://www.vivabro.com/en/img/profile/m_001.png" alt="testimonial" /> <br> Team Coock </a>
</div>
<div class="sub">
<a href="#"><img src="http://armstrongmuller.com.au/wp-content/uploads/profils-dmuller-225x300.jpg" alt="testimonial" /> <br> John Fokner </a>
</div>
<div class="sub">
<a href="#"><img src="https://i1.wp.com/humanbiologicalmonitoring.eu/wp-content/uploads/2015/05/HOPF_photo.jpg" alt="testimonial" /> <br> Tom Lisa </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="//nicesnippets.com/demo/jquery-1.12.0.min.js"></script>
<script src="//nicesnippets.com/demo/owl.carousel.min.js"></script>
<script src="//nicesnippets.com/demo/wow.min.js"></script>
<script src="http://northpointplus.com/thecodehunter/education/js/bootstrap-select.min.js"></script>
<script src="//nicesnippets.com/demo/jquery.counterup.min.js"></script>
<script src="//nicesnippets.com/demo/jquery.sticky.js"></script>
<script src="//nicesnippets.com/demo/jquery.parallax-1.1.3.js"></script>
<script src="//nicesnippets.com/demo/main.js"></script>
</body>
</html>
.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;
}