Bootstrap Carousel with Captions and Thumbnails Free Download

How to Create Bootstrap Carousel with Captions and Thumbnails

Table of Contents

In this article, we will see how to create Bootstrap Carousel with Captions and Thumbnails for your website. Bootstrap Carousel is also known as an image slideshow. It is very helpful to display a large amount of content within a small space on the home page of your website. For this, we will use the bootstrap CSS and Javascript library.

Read Also:

First, we need the create the index.html, and then we have to add the following library files in the header section.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,100|Raleway:400,800,700,600,300,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,600italic,800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/theme.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/plugin.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all">

HTML Code

This section contains all the HTML codes which help to create the structure of the Image Slideshow with Captions. The HTML code is given below.

<div class="carousel ps_easeOutInCubic ps_slide_y slide swipe_y thumb_scroll_y x_006_img_thumbnail_control_button x_006_img_thumbnail_indicators" data-duration="2000" data-interval="8000" data-pause="hover" data-ride="carousel" id="x_006_img_thumbnail">
  <ol class="carousel-indicators">
    <li data-slide-to="0" data-target="#x_006_img_thumbnail" class="active"> <img alt="x_006_img_thumbnail_01_sm" src="images/x_006_img_thumbnail_01_sm.jpg"> </li>
    <li data-slide-to="1" data-target="#x_006_img_thumbnail"> <img alt="x_006_img_thumbnail_02_sm" src="images/x_006_img_thumbnail_02_sm.jpg"> </li>
    <li data-slide-to="2" data-target="#x_006_img_thumbnail"> <img alt="x_006_img_thumbnail_03_sm" src="images/x_006_img_thumbnail_03_sm.jpg"> </li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active"> <img alt="x_006_img_thumbnail_01" src="images/js_frm_031_01.jpg">
      <div class="x_006_img_thumbnail_text">
        <h1 data-animation="animated fadeInUp">bootstap<span>Carousel</span>On codeCanyon</h1>
        <p data-animation="animated fadeInUp">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa.</p>
        <a href="#" data-animation="animated fadeInUp">read more</a></div>
    </div>
    <div class="item"> <img alt="x_006_img_thumbnail_02" src="images/in_th_029_02.jpg">
      <div class="x_006_img_thumbnail_text x_006_img_thumbnail_text_center">
        <h1 data-animation="animated fadeInUp">bootstap<span>Carousel</span>On codeCanyon</h1>
        <p data-animation="animated fadeInUp">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa.</p>
        <a href="#" data-animation="animated fadeInUp">read more</a></div>
    </div>
    <div class="item"><img alt="x_006_img_thumbnail_03" src="images/in_th_021_03.jpg">
      <div class="x_006_img_thumbnail_text x_006_img_thumbnail_text_right">
        <h1 data-animation="animated fadeInUp">bootstap<span>Carousel</span>On codeCanyon</h1>
        <p data-animation="animated fadeInUp">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa.</p>
        <a href="#" data-animation="animated fadeInUp">read more</a></div>
    </div>
  </div>
  <a href="#x_006_img_thumbnail" class="carousel-control left" data-slide="prev" role="button"><span class="fa fa-angle-up"></span> </a> 
	<a href="#x_006_img_thumbnail" class="carousel-control right" data-slide="next" role="button"><span class="fa fa-angle-down"></span></a> 
	</div>

CSS Code

This section will help you to provide the style on the Image slideshow.

Javascript Code

The following Javascript will help you to add the effect on Image slideshow.

!function(i){"use strict";function s(s){var t="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";s.each(function(){var s=i(this),o=s.data("animation");s.addClass(o).one(t,function(){s.removeClass(o)})})}var t=i(".carousel"),o=t.find(".item:first").find("[data-animation ^= 'animated']");t.carousel(),s(o),t.on("slide.bs.carousel",function(t){var o=i(t.relatedTarget).find("[data-animation ^= 'animated']");s(o)});var n=i(".carousel").attr("data-duration");isNaN(n)||0>=n?(i.fn.carousel.Constructor.TRANSITION_DURATION=1e3,i(".carousel-inner > .item").css({"-webkit-transition-duration":n+"1000ms","-moz-transition-duration":n+"1000ms","transition-duration":n+"1000ms"})):(i.fn.carousel.Constructor.TRANSITION_DURATION=n,i(".carousel-inner > .item").css({"-webkit-transition-duration":n+"ms","-moz-transition-duration":n+"ms","transition-duration":n+"ms"}));var e=i(".carousel").find("[class=mouse_wheel_y]"),a=i(".carousel").find("[class=mouse_wheel_xy]");a&&i(".mouse_wheel_xy").bind("mousewheel",function(s){s.originalEvent.wheelDelta/120>0?i(this).carousel("prev"):i(this).carousel("next")}),e&&i(".mouse_wheel_y").bind("mousewheel",function(s){s.originalEvent.wheelDelta/120>0&&i(this).carousel("next")});var l=i(".carousel").find("[class=swipe_y]"),r=i(".carousel").find("[class=swipe_x]");l&&i(".swipe_y .carousel-inner").swipe({swipeUp:function(s,t,o,n,e){i(this).parent().carousel("next")},swipeDown:function(){i(this).parent().carousel("prev")},threshold:0}),r&&i(".swipe_x .carousel-inner").swipe({swipeLeft:function(s,t,o,n,e){i(this).parent().carousel("next")},swipeRight:function(){i(this).parent().carousel("prev")},threshold:0});var c=0,u=0,h=i(".carousel").find("[class=thumb_scroll_y]"),d=i(".carousel").find("[class=thumb_scroll_x]");h&&i(".thumb_scroll_y").on("slid.bs.carousel",function(){var s=-1*i(".thumb_scroll_y .carousel-indicators li:first").position().top+i(".thumb_scroll_y .carousel-indicators li:last").position().top+i(".thumb_scroll_y .carousel-indicators li:last").height(),t=i(".thumb_scroll_y .carousel-indicators li.active").position().top+i(".thumb_scroll_y .carousel-indicators li.active").height()/1,o=t+c,n=o-i(".thumb_scroll_y .carousel-indicators").height()/1;0>n&&(n=0),n>s-i(".thumb_scroll_y .carousel-indicators").height()&&(n=s-i(".thumb_scroll_y .carousel-indicators").height()),i(".thumb_scroll_y .carousel-indicators").animate({scrollTop:n},800),c=n}),d&&i(".thumb_scroll_x").on("slid.bs.carousel",function(){var s=-1*i(".thumb_scroll_x .carousel-indicators li:first").position().left+i(".thumb_scroll_x .carousel-indicators li:last").position().left+i(".thumb_scroll_x .carousel-indicators li:last").width(),t=i(".thumb_scroll_x .carousel-indicators li.active").position().left+i(".thumb_scroll_x .carousel-indicators li.active").width()/1,o=t+u,n=o-i(".thumb_scroll_x .carousel-indicators").width()/1;0>n&&(n=0),n>s-i(".thumb_scroll_x .carousel-indicators").width()&&(n=s-i(".thumb_scroll_x .carousel-indicators").width()),i(".thumb_scroll_x .carousel-indicators").animate({scrollLeft:n},800),u=n}),i(".six_coloumns .item").each(function(){for(var s=i(this),t=1;6>t;t++)s=s.next(),s.length||(s=i(this).siblings(":first")),s.children(":first-child").clone().addClass("cloneditem-"+t).appendTo(i(this))}),i(".five_coloumns .item").each(function(){for(var s=i(this),t=1;5>t;t++)s=s.next(),s.length||(s=i(this).siblings(":first")),s.children(":first-child").clone().addClass("cloneditem-"+t).appendTo(i(this))}),i(".four_coloumns .item").each(function(){for(var s=i(this),t=1;4>t;t++)s=s.next(),s.length||(s=i(this).siblings(":first")),s.children(":first-child").clone().addClass("cloneditem-"+t).appendTo(i(this))}),i(".three_coloumns .item").each(function(){for(var s=i(this),t=1;3>t;t++)s=s.next(),s.length||(s=i(this).siblings(":first")),s.children(":first-child").clone().addClass("cloneditem-"+t).appendTo(i(this))}),i(".two_coloumns .item").each(function(){for(var s=i(this),t=1;2>t;t++)s=s.next(),s.length||(s=i(this).siblings(":first")),s.children(":first-child").clone().addClass("cloneditem-"+t).appendTo(i(this))}),i(".pauseVideo").on("slide.bs.carousel",function(){i("video").each(function(){this.pause()})}),i(".onlinePauseVideo").on("slide.bs.carousel",function(s){var t=i(s.target).find("iframe");t.each(function(s,t){i(t).attr("src",i(t).attr("src"))})})}(jQuery);

Add the following library in the footer section.

<script src="js/jquery-1.12.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.touchSwipe.js"></script> 
<script src="js/plugin.min.js"></script>

Read Also:

Full HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Carousel with Captions and Thumbnails | Image Slideshow</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100|Raleway:400,800,700,600,300,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,600italic,800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/theme.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/plugin.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all">
<!--<![endif]--> 
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]--> 
<!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]--> 
<!--[if IE 8]><html class=lt-ie9><![endif]--> 
<!--[if gt IE 8]><!-->
</head>
<body>
<div class="carousel ps_easeOutInCubic ps_slide_y slide swipe_y thumb_scroll_y x_006_img_thumbnail_control_button x_006_img_thumbnail_indicators" data-duration="2000" data-interval="8000" data-pause="hover" data-ride="carousel" id="x_006_img_thumbnail">
  <ol class="carousel-indicators">
    <li data-slide-to="0" data-target="#x_006_img_thumbnail" class="active"> <img alt="x_006_img_thumbnail_01_sm" src="images/x_006_img_thumbnail_01_sm.jpg"> </li>
    <li data-slide-to="1" data-target="#x_006_img_thumbnail"> <img alt="x_006_img_thumbnail_02_sm" src="images/x_006_img_thumbnail_02_sm.jpg"> </li>
    <li data-slide-to="2" data-target="#x_006_img_thumbnail"> <img alt="x_006_img_thumbnail_03_sm" src="images/x_006_img_thumbnail_03_sm.jpg"> </li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active"> <img alt="x_006_img_thumbnail_01" src="images/js_frm_031_01.jpg">
      <div class="x_006_img_thumbnail_text">
        <h1 data-animation="animated fadeInUp">bootstap<span>Carousel</span>On codeCanyon</h1>
        <p data-animation="animated fadeInUp">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa.</p>
        <a href="#" data-animation="animated fadeInUp">read more</a></div>
    </div>
    <div class="item"> <img alt="x_006_img_thumbnail_02" src="images/in_th_029_02.jpg">
      <div class="x_006_img_thumbnail_text x_006_img_thumbnail_text_center">
        <h1 data-animation="animated fadeInUp">bootstap<span>Carousel</span>On codeCanyon</h1>
        <p data-animation="animated fadeInUp">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa.</p>
        <a href="#" data-animation="animated fadeInUp">read more</a></div>
    </div>
    <div class="item"><img alt="x_006_img_thumbnail_03" src="images/in_th_021_03.jpg">
      <div class="x_006_img_thumbnail_text x_006_img_thumbnail_text_right">
        <h1 data-animation="animated fadeInUp">bootstap<span>Carousel</span>On codeCanyon</h1>
        <p data-animation="animated fadeInUp">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa.</p>
        <a href="#" data-animation="animated fadeInUp">read more</a></div>
    </div>
  </div>
  <a href="#x_006_img_thumbnail" class="carousel-control left" data-slide="prev" role="button"><span class="fa fa-angle-up"></span> </a> 
	<a href="#x_006_img_thumbnail" class="carousel-control right" data-slide="next" role="button"><span class="fa fa-angle-down"></span></a> 
	</div>
<script src="js/jquery-1.12.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.touchSwipe.js"></script> 
<script src="js/plugin.min.js"></script>
</body>
</html>

Download the Source code of Bootstrap Carousel with Captions and Thumbnails

Bootstrap 5 Carousel with Captions and Thumbnails

1 file(s) 749KB

Download

Live Demo

December 13, 2022

HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details

jQuery Carousel Slider With Accordion Style Transitions

June 6, 2022

HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details

Testimonials HTML Template Free Download

January 15, 2022

HTMLCSS

Testimonials HTML Template Free Download

Know Details

Bootstrap Table with Pagination and Search

January 9, 2022

HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

Attractive Responsive Testimonials Carousel

December 8, 2021

HTMLCSS

Attractive Responsive Testimonials Carousel

Know Details

How To Make Responsive Testimonial Slider

December 7, 2021

HTMLCSS

How To Make Responsive Testimonial Slider

Know Details

Bootstrap Carousel with Captions and Thumbnails Free Download

How to Create Bootstrap Carousel with Captions and Thumbnails

Read Also:

HTML Code

CSS Code

Javascript Code

Read Also:

Full HTML Code

Download the Source code of Bootstrap Carousel with Captions and Thumbnails

Bootstrap 5 Carousel with Captions and Thumbnails

Related Post

Owl Carousel Product Slider in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Testimonials HTML Template Free Download

Bootstrap Table with Pagination and Search

Attractive Responsive Testimonials Carousel

How To Make Responsive Testimonial Slider

Leave a Reply Cancel reply

Search

Donate

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement

Quick Links

Important Links

Share on

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

How to Create Bootstrap Carousel with Captions and Thumbnails

Read Also:

HTML Code

CSS Code

Javascript Code

Read Also:

Full HTML Code

Download the Source code of Bootstrap Carousel with Captions and Thumbnails

Bootstrap 5 Carousel with Captions and Thumbnails

Share this:

Related Post

Owl Carousel Product Slider in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Testimonials HTML Template Free Download

Bootstrap Table with Pagination and Search

Attractive Responsive Testimonials Carousel

How To Make Responsive Testimonial Slider

Leave a Reply Cancel reply

Search

Donate

Categories

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement