Bootstrap Thumbnails:

Thumbnail Slider and Descriptions with Bootstrap

If you have an online shop and want to use a place for description, look at this item carefully. Many advanced websites have this factor, too. This post has a code with the name Thumbnail Slider and Descriptions with Bootstrap. This code contains an attractive and functional Javascript Thumbnail Slider that allows you to add information about your team or your skills at the end of the website. Most online shops use this Free Thumbnail Code to express more about themselves. It is worth noting that many people like this code and are attracted to websites with Thumbnail code with Carousel.

As you see here, this code has a blue theme with black writings. There are some white pages in these Bootstrap Blue Thumbnails. As the preview shows, there are two little icons at the bottom of the page related to slides. You can move to other pages and change them easily by clicking on these blue icons. Each page has a place for adding a photo. This part has a black border with shadows. You can also use this code to mention the client’s opinion. This Thumbnail Slider Code is available from this link.

Free Thumbnail Code

Thumbnail code with Carousel

Javascript Thumbnail Slider

Bootstrap Blue Thumbnails

Thumbnail Slider Code

<!-- This script got from frontendfreecode.com -->
<div class="container-fluid px-3 px-sm-5 my-5 text-center">
    <h4 class="mb-5 font-weight-bold">What Our Client Say</h4>
    <div class="owl-carousel owl-theme">
        <div class="item first prev">
            <div class="card border-0 py-3 px-4">
                <div class="row justify-content-center"> <img src="https://i.imgur.com/gazoShk.jpg" class="img-fluid profile-pic mb-4 mt-3"> </div>
                <h6 class="mb-3 mt-2">Lorem ipsum</h6>
                <p class="content mb-5 mx-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim.</p>
            </div>
        </div>
        <div class="item show">
            <div class="card border-0 py-3 px-4">
                <div class="row justify-content-center"> <img src="https://i.imgur.com/oW8Wpwi.jpg" class="img-fluid profile-pic mb-4 mt-3"> </div>
                <h6 class="mb-3 mt-2">Ximena VegaraLorem ipsum</h6>
                <p class="content mb-5 mx-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim.</p>
            </div>
        </div>
        <div class="item next">
            <div class="card border-0 py-3 px-4">
                <div class="row justify-content-center"> <img src="https://i.imgur.com/ndQx2Rg.jpg" class="img-fluid profile-pic mb-4 mt-3"> </div>
                <h6 class="mb-3 mt-2">Lorem ipsum</h6>
                <p class="content mb-5 mx-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim.</p>
            </div>
        </div>
        <div class="item last">
            <div class="card border-0 py-3 px-4">
                <div class="row justify-content-center"> <img src="https://i.imgur.com/T5aOhwh.jpg" class="img-fluid profile-pic mb-4 mt-3"> </div>
                <h6 class="mb-3 mt-2">Lorem ipsum</h6>
                <p class="content mb-5 mx-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim.</p>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    color: #000;
    overflow-x: hidden;
    height: 100%;
    background-image: linear-gradient(180deg, #1E88E5, #fff);
    background-repeat: no-repeat
}
.card {
    box-shadow: 0px 4px 8px 0px #BDBDBD
}
.profile-pic {
    width: 100px !important;
    height: 100px;
    box-shadow: 0px 4px 8px 0px #BDBDBD
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    background: 0 0;
    color: #1E88E5 !important;
    border: none;
    padding: 5px 20px !important;
    font: inherit;
    font-size: 50px !important
}
.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover {
    color: #0D47A1 !important;
    background-color: transparent !important
}
.owl-dots {
    display: none
}
button:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline-width: 0
}
.item {
    display: none
}
.next {
    display: block !important;
    position: relative;
    transform: scale(0.8);
    transition-duration: 0.3s;
    opacity: 0.6
}
.prev {
    display: block !important;
    position: relative;
    transform: scale(0.8);
    transition-duration: 0.3s;
    opacity: 0.6
}
.item.show {
    display: block;
    transition-duration: 0.4s
}
@media screen and (max-width: 999px) {
    .next,
    .prev {
        transform: scale(1);
        opacity: 1
    }
    .item {
        display: block !important
    }
}

$(document).ready(function() {
	$('.owl-carousel').owlCarousel({
		mouseDrag: false,
		loop: true,
		margin: 2,
		nav: true,
		responsive: {
			0: {
				items: 1
			},
			600: {
				items: 1
			},
			1000: {
				items: 3
			}
		}
	});
	$('.owl-prev').click(function() {
		$active = $('.owl-item .item.show');
		$('.owl-item .item.show').removeClass('show');
		$('.owl-item .item').removeClass('next');
		$('.owl-item .item').removeClass('prev');
		$active.addClass('next');
		if ($active.is('.first')) {
			$('.owl-item .last').addClass('show');
			$('.first').addClass('next');
			$('.owl-item .last').parent().prev().children('.item').addClass('prev');
		} else {
			$active.parent().prev().children('.item').addClass('show');
			if ($active.parent().prev().children('.item').is('.first')) {
				$('.owl-item .last').addClass('prev');
			} else {
				$('.owl-item .show').parent().prev().children('.item').addClass('prev');
			}
		}
	});
	$('.owl-next').click(function() {
		$active = $('.owl-item .item.show');
		$('.owl-item .item.show').removeClass('show');
		$('.owl-item .item').removeClass('next');
		$('.owl-item .item').removeClass('prev');
		$active.addClass('prev');
		if ($active.is('.last')) {
			$('.owl-item .first').addClass('show');
			$('.owl-item .first').parent().next().children('.item').addClass('prev');
		} else {
			$active.parent().next().children('.item').addClass('show');
			if ($active.parent().next().children('.item').is('.last')) {
				$('.owl-item .first').addClass('next');
			} else {
				$('.owl-item .show').parent().next().children('.item').addClass('next');
			}
		}
	});
});

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
<style>
body {
    color: #000;
    overflow-x: hidden;
    height: 100%;
    background-image: linear-gradient(180deg, #1E88E5, #fff);
    background-repeat: no-repeat
}
.card {
    box-shadow: 0px 4px 8px 0px #BDBDBD
}
.profile-pic {
    width: 100px !important;
    height: 100px;
    box-shadow: 0px 4px 8px 0px #BDBDBD
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    background: 0 0;
    color: #1E88E5 !important;
    border: none;
    padding: 5px 20px !important;
    font: inherit;
    font-size: 50px !important
}
.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover {
    color: #0D47A1 !important;
    background-color: transparent !important
}
.owl-dots {
    display: none
}
button:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline-width: 0
}
.item {
    display: none
}
.next {
    display: block !important;
    position: relative;
    transform: scale(0.8);
    transition-duration: 0.3s;
    opacity: 0.6
}
.prev {
    display: block !important;
    position: relative;
    transform: scale(0.8);
    transition-duration: 0.3s;
    opacity: 0.6
}
.item.show {
    display: block;
    transition-duration: 0.4s
}
@media screen and (max-width: 999px) {
    .next,
    .prev {
        transform: scale(1);
        opacity: 1
    }
    .item {
        display: block !important
    }
}
</style>

</head>
<body>
<div class="container-fluid px-3 px-sm-5 my-5 text-center">
    <h4 class="mb-5 font-weight-bold">What Our Client Say</h4>
    <div class="owl-carousel owl-theme">
        <div class="item first prev">
            <div class="card border-0 py-3 px-4">
                <div class="row justify-content-center"> <img src="https://i.imgur.com/gazoShk.jpg" class="img-fluid profile-pic mb-4 mt-3"> </div>
                <h6 class="mb-3 mt-2">Lorem ipsum</h6>
                <p class="content mb-5 mx-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim.</p>
            </div>
        </div>
        <div class="item show">
            <div class="card border-0 py-3 px-4">
                <div class="row justify-content-center"> <img src="https://i.imgur.com/oW8Wpwi.jpg" class="img-fluid profile-pic mb-4 mt-3"> </div>
                <h6 class="mb-3 mt-2">Ximena VegaraLorem ipsum</h6>
                <p class="content mb-5 mx-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim.</p>
            </div>
        </div>
        <div class="item next">
            <div class="card border-0 py-3 px-4">
                <div class="row justify-content-center"> <img src="https://i.imgur.com/ndQx2Rg.jpg" class="img-fluid profile-pic mb-4 mt-3"> </div>
                <h6 class="mb-3 mt-2">Lorem ipsum</h6>
                <p class="content mb-5 mx-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim.</p>
            </div>
        </div>
        <div class="item last">
            <div class="card border-0 py-3 px-4">
                <div class="row justify-content-center"> <img src="https://i.imgur.com/T5aOhwh.jpg" class="img-fluid profile-pic mb-4 mt-3"> </div>
                <h6 class="mb-3 mt-2">Lorem ipsum</h6>
                <p class="content mb-5 mx-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim.</p>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function() {
	$('.owl-carousel').owlCarousel({
		mouseDrag: false,
		loop: true,
		margin: 2,
		nav: true,
		responsive: {
			0: {
				items: 1
			},
			600: {
				items: 1
			},
			1000: {
				items: 3
			}
		}
	});
	$('.owl-prev').click(function() {
		$active = $('.owl-item .item.show');
		$('.owl-item .item.show').removeClass('show');
		$('.owl-item .item').removeClass('next');
		$('.owl-item .item').removeClass('prev');
		$active.addClass('next');
		if ($active.is('.first')) {
			$('.owl-item .last').addClass('show');
			$('.first').addClass('next');
			$('.owl-item .last').parent().prev().children('.item').addClass('prev');
		} else {
			$active.parent().prev().children('.item').addClass('show');
			if ($active.parent().prev().children('.item').is('.first')) {
				$('.owl-item .last').addClass('prev');
			} else {
				$('.owl-item .show').parent().prev().children('.item').addClass('prev');
			}
		}
	});
	$('.owl-next').click(function() {
		$active = $('.owl-item .item.show');
		$('.owl-item .item.show').removeClass('show');
		$('.owl-item .item').removeClass('next');
		$('.owl-item .item').removeClass('prev');
		$active.addClass('prev');
		if ($active.is('.last')) {
			$('.owl-item .first').addClass('show');
			$('.owl-item .first').parent().next().children('.item').addClass('prev');
		} else {
			$active.parent().next().children('.item').addClass('show');
			if ($active.parent().next().children('.item').is('.last')) {
				$('.owl-item .first').addClass('next');
			} else {
				$('.owl-item .show').parent().next().children('.item').addClass('next');
			}
		}
	});
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars