Home » bootstrap 4 multiple image slider with thumbnail navigation

bootstrap 4 multiple image slider with thumbnail navigation

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

bootstrap slider with thumbnail navigation, bootstrap multiple images slider, bootstrap carousel slider with thumbnails, this slider use for school college ranker, in one slide multiples thumbnail images slider
vertical slider bootstrap 4

We allows to free Articles of , you can download full source code of bootstrap multiple image slider layout. there in That post We shall give you demo product slider bootstrap with example of bootstrap carousel slider with thumbnails article with you will get simple all the source code of html, css with Javascript or jquery. In bootstrap multiple image slider responsive article We give you Some step with html, css with Javascript code for multiple image slider bootstrap, you can easily get all the source code vertical slider bootstrap 4 of in one slide multiples thumbnail images slider layout.

Read Also:  Laravel Dynamic Change page Title Tags

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 :

Read Also:  Laravel 6 Clear Queued Jobs Example

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:

  1. Read Also:  Vuejs Restful Http Post and Get Web Api Calls
  2. Read Also:  PHP Convert An Array To An Object Example
  3. Read Also:  Reading Contents From PDF File In C#
  4. Read Also:  Laravel 6 Inserting & Updating Eloquent Models
  5. Read Also:  Autocomplete with Search box in vuejs Demo
  6. Read Also:  Blinking text CSS Animation
  7. Read Also:  Vuejs Autocomplete Input Tags component
  8. Read Also:  Bootstrap carousel slider with thumbnail image gallery
  9. Read Also:  bootstrap vertical carousel slider with jQuery Example
  10. Read Also:  General full forms used in daily life

Leave a Comment

Your email address will not be published. Required fields are marked *