" image Gallery with Thumbnail Carousel"
Bootstrap 3.3.0 Snippet by mohamedadel

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link href="http://alhabashy.com/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="http://alhabashy.com/css/owl.carousel.css" type="text/css" rel="stylesheet"> <link href="http://alhabashy.com/css/styleslider.css" type="text/css" rel="stylesheet"> <link href="http://alhabashy.com/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <link href="http://alhabashy.com/css/animate.css" type="text/css" rel="stylesheet"> <link href="http://alhabashy.com/css/responsive.css" type="text/css" rel="stylesheet"> </head> <div class="single-portfolio"> <div class="container"> <div id="carousel" class="carousel slide" data-ride="carousel"> <div class="single-portfolio__main-img carousel-inner"> <div class="item active"> <img src="https://metrouk2.files.wordpress.com/2018/07/gettyimages-963258488.jpg"> </div> <div class="item"> <img src="https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/11/31/187/45817611/1.0-10/45817611.jpg"> </div> <div class="item"> <img src="https://cdn.newsapi.com.au/image/v1/ad2cc96b9fbd8d08ad4a631d172d93a3"> </div> <div class="item"> <img src="https://dailynewsegyptcom-mokannggxlave7h.stackpathdns.com/app/uploads/2016/06/Abu-Trika-768x430.jpg"> </div> <div class="item"> <img src="http://e1.365dm.com/18/03/16-9/20/skysports-mesut-ozil-arsenal_4252995.jpg"> </div> <div class="item"> <img src="https://images.performgroup.com/di/library/omnisport/14/f/luka-modric-cropped_1f5rq8yayhzjl12eur1g9hp3fi.jpg"> </div> <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> <i class="" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#carousel" role="button" data-slide="next"><i class="" aria-hidden="true"></i> </a> </div> </div> <div class="clearfix"> <div id="thumbcarousel" class="carousel slide" data-interval="false"> <div class="single-product__small-img carousel-inner"> <div class="item active"> <div class="col-md-2 col-xs-4"> <div class="single-portfolio__content content"> <div class="single-portfolio__overlay content-overlay"></div> <div data-target="#carousel" data-slide-to="0" class="thumb"> <img class="content-image" src="https://metrouk2.files.wordpress.com/2018/07/gettyimages-963258488.jpg"> <div class="single-portfolio__content-details content-details fadeIn-bottom"> <h3 class="single-portfolio___content-title content-title">[view Project] </h3> </div> </a> </div> </div> </div> <div class="col-md-2 col-xs-4"> <div class="single-portfolio__content content"> <div class="single-portfolio__overlay content-overlay"></div> <div data-target="#carousel" data-slide-to="1" class="thumb"> <img class="content-image" src="https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/11/31/187/45817611/1.0-10/45817611.jpg"> <div class="single-portfolio__content-details content-details fadeIn-bottom"> <h3 class="single-portfolio___content-title content-title">[view Project] </h3> </div> </a> </div> </div> </div> <div class="col-md-2 col-xs-4"> <div class="single-portfolio__content content"> <div class="single-portfolio__overlay content-overlay"></div> <div data-target="#carousel" data-slide-to="2" class="thumb"> <img class="content-image" src="https://cdn.newsapi.com.au/image/v1/ad2cc96b9fbd8d08ad4a631d172d93a3"> <div class="single-portfolio__content-details content-details fadeIn-bottom"> <h3 class="single-portfolio___content-title content-title">[view Project] </h3> </div> </a> </div> </div> </div> <div class="col-md-2 col-xs-4"> <div class="single-portfolio__content content"> <div class="single-portfolio__overlay content-overlay"></div> <div data-target="#carousel" data-slide-to="3" class="thumb"> <img class="content-image" src="https://dailynewsegyptcom-mokannggxlave7h.stackpathdns.com/app/uploads/2016/06/Abu-Trika-768x430.jpg"> <div class="single-portfolio__content-details content-details fadeIn-bottom"> <h3 class="single-portfolio___content-title content-title">[view Project] </h3> </div> </a> </div> </div> </div> <div class="col-md-2 col-xs-4"> <div class="single-portfolio__content content"> <div class="single-portfolio__overlay content-overlay"></div> <div data-target="#carousel" data-slide-to="4" class="thumb"> <img class="content-image" src="http://e1.365dm.com/18/03/16-9/20/skysports-mesut-ozil-arsenal_4252995.jpg"> <div class="single-portfolio__content-details content-details fadeIn-bottom"> <h3 class="single-portfolio___content-title content-title">[view Project] </h3> </div> </a> </div> </div> </div> <div class="col-md-2 col-xs-4"> <div class="single-portfolio__content content"> <div class="single-portfolio__overlay content-overlay"></div> <div data-target="#carousel" data-slide-to="5" class="thumb"> <img class="content-image" src="https://images.performgroup.com/di/library/omnisport/14/f/luka-modric-cropped_1f5rq8yayhzjl12eur1g9hp3fi.jpg"> <div class="single-portfolio__content-details content-details fadeIn-bottom"> <h3 class="single-portfolio___content-title content-title">[view Project] </h3> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--Single Product Image End--
.content { position: relative; overflow: hidden; } .content .content-overlay { position: absolute; background: #5b1c4cde!important; height: 100%; width: 100%; left: 0; top: 0; opacity: 0; background: 0; transition: all .4s ease-in-out 0s; } .content .content-overlay { background: #5b1c4cde!important; } .content:hover .content-overlay { opacity: 1 } .content-image { width: 100%; border: 1px solid #570f43 } .content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s } .content:hover .content-details { top: 50%; left: 50%; opacity: 1 } .content-details h3 { color: #fec40d; font-weight: 500; letter-spacing: .15em; margin-bottom: .5em; text-transform: uppercase; font-size: 18px } .content-details p { color: #fff; font-size: .8em } .fadeIn-bottom { top: 80% } .fadeIn-top { top: 20% } .single-portfolio .thumb { display: inline-block; vertical-align: middle; cursor: pointer; max-width: 98px; } .single-portfolio img { width: 160px; height: 160px; margin-right: 14px; padding: 5px; object-fit:cover; } .single-portfolio__main-img img { height: 609px!important; width: 100%!important; object-fit: cover; padding: 19px; } .carousel-control.left{ left: 40px!important; background: url("http://alhabashy.com/img/our-portfolio/previous-arrow.png") 0 5px no-repeat!important; width: 37px!important; height: 80px!important } .carousel-control.right{ right: 40px!important; background: url("http://alhabashy.com/img/our-portfolio/next-arrow.png") 0 5px no-repeat!important; width: 37px!important; height: 80px!important } a.left.carousel-control { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; /* text-indent: -9999px; */ z-index: 999999999999; } a.right.carousel-control { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; /* text-indent: -9999px; */ z-index: 999999999999; } .single-portfolio .content-details h3 { color: #fec40d!important; font-family: MerriweatherSans-Regular!important; font-size: 16px; text-align: center; letter-spacing: 0; }

Related: See More

Full Calendar
arrow key navigation thumbnail gallery modal view
Image Crop jQuery
Bootstrap 4 Carousel

Questions / Comments: