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="http://nicesnippets.com/demo/owl.carousel.min.css" /> <link rel="stylesheet" href="http://nicesnippets.com/demo/animate.css" /> <link rel="stylesheet" href="http://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="http://nicesnippets.com/demo/jquery-1.12.0.min.js"></script> <script src="http://nicesnippets.com/demo/owl.carousel.min.js"></script> <script src="http://nicesnippets.com/demo/wow.min.js"></script> <script src="http://northpointplus.com/thecodehunter/education/js/bootstrap-select.min.js"></script> <script src="http://nicesnippets.com/demo/jquery.counterup.min.js"></script> <script src="http://nicesnippets.com/demo/jquery.sticky.js"></script> <script src="http://nicesnippets.com/demo/jquery.parallax-1.1.3.js"></script> <script src="http://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; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post