5+ Bootstrap Slideshow Examples

This post contains a total of 5+ Hand-Picked Bootstrap Slideshow Examples with Source Code. All these Slideshows are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Slideshow Examples

1. By John uber

Made by John uber. Bootstrap Slideshow Carousel with Cursor Icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style>
.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.cursor-icons {
  display: none;
}

.carousel-control {
  width: 50%;
}

.carousel .right:hover {
  cursor: url("http://johnuberbacher.com/projects/codepen/arrow-right.png"), default !important
}

.carousel .left:hover {
  cursor: url("http://johnuberbacher.com/projects/codepen/arrow-left.png"), default !important
}

.carousel-indicators li {
  border-radius: 3px;
  height: 13px;
  width: 13px;
  margin: 2px;
  font-weight: 800;
  border: 2px solid #fff;
}

.carousel-indicators .active {
  height: 17px;
  width: 17px;
}
</style>
</head>
<body>
  <div class="container">
  <br>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <!-- Carousel Card -->
      <div class="card card-raised card-carousel">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <div class="carousel slide" data-ride="carousel">

            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
              <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item">
                <img src="http://johnuberbacher.com/projects/codepen/slideshow-1.jpg">
                <div class="carousel-caption">
                  <h4>Slideshow 1</h4>
                </div>
              </div>
              <div class="item active">
                <img src="http://johnuberbacher.com/projects/codepen/slideshow-2.jpg" alt="Awesome Image">
                <div class="carousel-caption">
                  <h4>Slideshow 2</h4>
                </div>
              </div>
              <div class="item">
                <img src="http://johnuberbacher.com/projects/codepen/slideshow-3.jpg" alt="Awesome Image">
                <div class="carousel-caption">
                  <h4>Slideshow 3</h4>
                </div>
              </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
              <i class="cursor-icons">keyboard_arrow_left</i>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
              <i class="cursor-icons">keyboard_arrow_right</i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- End Carousel Card -->
  </div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

2. By DANIEL

Made by DANIEL. Slideshow with Prism Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://tympanus.net/Tutorials/PrismEffectSlider/css/component.css'>
<style>
.wrapper {
	width: 100%;
	background: white;
  display:flex;
  align-items:center;
  justify-content: center;
}

.wrapper .prism-slider {
	width: 60%;
}

.prism-slider {
	width: 100%;
	height: 0;
	position: relative;
  
}

.prism-slider canvas {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.navigation {
	width: 100%;
	position: absolute;
	bottom: 5%;
	text-align: center;
	list-style: none;
	z-index: 1;
}

.navigation li {
	border: 1px solid #eceff1;
	width: 18px;
	height: 18px;
	margin: 0 5px;
	background: transparent;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
}

.navigation .active {
	background: #eceff1;
}
</style>
</head>
<body>
  <div class="container">
			<div class="content">
				<div class="wrapper">
					<div class="prism-slider">
						<ul class="navigation"></ul>
					</div>					
				</div>
			</div>
		</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://tympanus.net/Tutorials/PrismEffectSlider/js/PrismSlider.js'></script>
<script src='https://tympanus.net/Tutorials/PrismEffectSlider/js/utils/easing.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://tympanus.net/Tutorials/PrismEffectSlider/js/utils/rAF.js'></script>
      <script>
/**
 * The slideshow controller.
 * Get settings and initialise PrismSlider for each layer,
 * add controls and events, then call slideTo method on click.
 * @return {Object} The set of public methods.
 */
var slideshow = function (window, undefined) {

  'use strict';


  /**
   * Enum navigation classes, attributes and
   * provide navigation DOM element container.
   */
  var navigation = {
    selector: '.navigation',
    element: null,
    bullet: 'li',
    attrs: {
      active: 'active',
      index: 'data-index' } };



  /**
   * Enum main element, sizes and provide
   * main DOM element container.
   * @type {Object}
   */
  var container = {
    selector: '.prism-slider',
    element: null,
    sizes: {
      w: 1200,
      h: 960 } };



  /**
   * Set of images to be used.
   * @type {Array}
   */
  var slides = [
  'https://static.pexels.com/photos/207153/pexels-photo-207153.jpeg',
  'https://static.pexels.com/photos/443383/pexels-photo-443383.jpeg',
  'https://static.pexels.com/photos/425137/pexels-photo-425137.jpeg',
  'https://static.pexels.com/photos/440313/pexels-photo-440313.jpeg',
  'https://static.pexels.com/photos/338400/pexels-photo-338400.jpeg',
  'https://static.pexels.com/photos/248850/pexels-photo-248850.jpeg'];


  /**
   * Set of masks with related effects.
   * @type {Array}
   */
  var masks = [
  {
    source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-a.svg',
    effects: {
      flip: 'Y',
      rotate: 167 // degrees
    } },

  {
    source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-b.svg',
    effects: {
      flip: 'X',
      rotate: 90 // degrees
    } },

  {
    source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-c.svg',
    effects: {
      flip: false,
      rotate: 13 // degrees
    } }];



  /**
   * Set global easing.
   * @type {Function(currentTime)}
   */
  var easing = Easing.easeInOutQuint;

  /**
   * Set global duration.
   * @type {Number}
   */
  var duration = 1000;

  /**
   * Container for PrismSlider instances.
   * @type {Object}
   */
  var instances = {};


  /**
   * Init.
   */
  function init() {

    getContainer_();

    initSlider_();

    initPrism_();

    addNavigation_();

    addEvents_();
  }


  /**
   * Get main container element, and store in container element.
   */
  function getContainer_() {
    container.element = document.querySelector(container.selector);
  }


  /**
   * Init Slides.
   * Create and initialise main background slider (first layer).
   * Since we'll use this as main slider no mask is given.
   */
  function initSlider_() {

    instances.slider = new PrismSlider({
      container: container,
      slides: slides,
      mask: false,
      duration: duration,
      easing: easing });


    // Initialise instance.
    instances.slider.init();
  }


  /**
   * Init Masks.
   * Loop masks variable and create a new layer for each mask object.
   */
  function initPrism_() {

    masks.forEach(function (mask, i) {
      // Generate reference name.
      var name = 'mask_' + i;

      instances[name] = new PrismSlider({
        container: container,
        slides: slides,
        mask: mask, // Here is the mask object.
        duration: duration,
        easing: easing });


      // Initialise instance.
      instances[name].init();
    });
  }


  /**
   * Add Navigation.
   * Create a new bullet for each slide and add it to navigation (ul)
   * with data-index reference.
   */
  function addNavigation_() {

    // Store navigation element.
    navigation.element = document.querySelector(navigation.selector);

    slides.forEach(function (slide, i) {

      var bullet = document.createElement(navigation.bullet);

      bullet.setAttribute(navigation.attrs.index, i);

      // When it's first bullet set class as active.
      if (i === 0) bullet.className = navigation.attrs.active;

      navigation.element.appendChild(bullet);
    });
  }


  /**
   * Add Events.
   * Bind click on bullets.
   */
  function addEvents_() {
    // Detect click on navigation elment (ul).
    navigation.element.addEventListener('click', function (e) {

      // Get clicked element.
      var bullet = e.target;

      // Detect if the clicked element is actually a bullet (li).
      var isBullet = bullet.nodeName === navigation.bullet.toUpperCase();

      // Check bullet and prevent action if animation is in progress.
      if (isBullet && !instances.slider.isAnimated) {
        // Remove active class from all bullets.
        for (var i = 0; i < navigation.element.childNodes.length; i++) {if (window.CP.shouldStopExecution(0)) break;
          navigation.element.childNodes[i].className = '';
        }
        // Add active class to clicked bullet.
        window.CP.exitedLoop(0);bullet.className = navigation.attrs.active;

        // Get index from data attribute and convert string to number.
        var index = Number(bullet.getAttribute(navigation.attrs.index));

        // Call slideAllTo method with index.
        slideAllTo_(index);
      }

    });
  }


  /**
   * Call slideTo method of each instance.
   * In order to sync sliding of all layers we'll loop through the
   * instances object and call the slideTo method for each instance.
   * @param {Number} index The index of the destination slide.
   */
  function slideAllTo_(index) {
    // Loop PrismSlider instances.
    for (var key in instances) {
      if (instances.hasOwnProperty(key)) {
        // Call slideTo for current instance.
        instances[key].slideTo(index);
      }
    }
  }


  return {
    init: init };
}(window);

/**
 * Bootstrap slideshow plugin.
 * For demo purposes images are preloaded inside a div hidden with css,
 * the plugin initialisation is delayed through window.onload, in a real life
 * scenario would be better to preload images asynchronously with javascript.
 */
window.onload = slideshow.init;
    </script>
</body>
</html>

3. By NoLagHere

Made by NoLagHere. Simple Bootstrap Slideshow Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://tympanus.net/Tutorials/PrismEffectSlider/css/demo.css'>
<link rel='stylesheet' href='https://tympanus.net/Tutorials/PrismEffectSlider/css/component.css'>
  
<style>
header{
  height:50px !important;
}
/* Article Layout */
.wrapper {
	width: 100%;
	background: white;
}

.wrapper:after {
	content: '';
	clear: both;
	display: block;
}

.wrapper .copy {
	width: 40%;
	float: left;
	position: relative;
}

.demo-2 .wrapper .copy {
	float: right;
}

.wrapper .copy:before {
	width: 0;
	height: 0;
	float: left;
	padding-bottom: 119%;
	content: '';
}

.wrapper .copy article {
	margin: auto;
	padding: 4vw;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.wrapper .copy h2 {
	margin: 0;
	font-size: 3em;
	font-size: 4vw;
}

.wrapper .copy p:first-of-type {
	color: #b1b6ba;
	font-size: 1.5em;
	font-size: 2vw;
	margin-bottom: 1.5em;
}

.wrapper .prism-slider {
	width: 60%;
	float: right;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.demo-2 .wrapper .prism-slider {
	float: left;
}

/* PrismSlider */
.cache {
	display: none;
}

.prism-slider {
	width: 1200px;
	max-width: 100%;
	height: 0;
	padding-bottom: 48%;
	position: relative;
}

.prism-slider canvas {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.navigation {
	width: 100%;
	position: absolute;
	bottom: 5%;
	text-align: center;
	list-style: none;
	z-index: 1;
}

.navigation li {
	border: 3px solid #eceff1;
	width: 18px;
	height: 18px;
	margin: 0 5px;
	background: #52525a;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
}

.navigation .active {
	background: #eceff1;
}

/* Media Queries */
@media screen and (max-width: 1024px) {
	.wrapper:after {
		display: none;
	}

	.wrapper .copy, .wrapper .prism-slider {
		width: 100%;
		float: none;
	}

	.wrapper .copy:before {
		display: none;
	}

	.wrapper .copy article {
		position: relative;
		padding: 50px;
		display: block;
	}

	.wrapper .copy h2 {
		font-size: 8vw;
	}

	.wrapper .copy p:first-of-type {
		font-size: 4vw;
	}

	.wrapper .prism-slider {
		padding-bottom: 80%;
	}

	.navigation li {
		width: 24px;
		height: 24px;
	}
}
</style>
	</head>
	<body class="demo-3">
		<div class="container">
			<header class="codrops-header">
				<h1>Heading</h1>
				
			</header>
			<div class="content">
				<!-- Start Demo -->

				<div class="cache">
					<!-- masks -->
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-a.svg">
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-b.svg">
					<img src="ihttps://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-c.svg">
					<!-- photos -->
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-a.jpg">
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-b.jpg">
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-c.jpg">
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-d.jpg">
				</div>

				<div class="wrapper">
					<div class="prism-slider prism-slider--left">
						<ul class="navigation"></ul>
					</div>
					<div class="copy copy--left">
						<article>
							<h2>Text</h2>
							<p>
								Lorem
							</p>
							<p>
								Lorem
							       
							</p>
						</article>
					</div>
				</div>
				<!-- End Demo -->
			</div>
		</div><!-- /container -->
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://tympanus.net/Tutorials/PrismEffectSlider/js/PrismSlider.js'></script>
<script src='https://tympanus.net/Tutorials/PrismEffectSlider/js/utils/easing.js'></script>
<script src='https://tympanus.net/Tutorials/PrismEffectSlider/js/utils/rAF.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var slideshow = function (window, undefined) {
  'use strict';
  var navigation = {
    selector: '.navigation',
    element: null,
    bullet: 'li',
    attrs: {
      active: 'active',
      index: 'data-index' } };
  var container = {
    selector: '.prism-slider',
    element: null,
    sizes: {
      w: 1200,
      h: 960 } };
  var slides = [
  'https://res.cloudinary.com/pxty/image/upload/c_scale,f_auto,q_60/v1/joltc1/~/media/growing-families-version1/gf-fr/v50/editorial-contents/articles/legacy-articles/victoria-main-images/comment-recycler-ses-dechets-6-conseils-faciles.jpg?la=fr-fr&v=1-201904030750&hash=9AB86D58FC94AA990BAA4325D20363E0CDEFAED7',
  'https://th.bing.com/th/id/OIP.OP6lUHWsFfEkkjlR2YNmiwHaE8?pid=ImgDet&rs=1',
  'https://p0.storage.canalblog.com/01/85/719630/53072124.jpg',
  'https://i.pinimg.com/originals/29/ab/e7/29abe71d61838c7e033b066f9174093c.jpg',
  'https://i.pinimg.com/originals/33/6e/c5/336ec584a9f7e4221260a6a5a353a2fb.jpg'];
  var masks = [
  {
    source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-a.svg',
    effects: {
      flip: 'Y',
      rotate: 167
    } },

  {
    source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-b.svg',
    effects: {
      flip: 'X',
      rotate: 90 
    } },

  {
    source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-c.svg',
    effects: {
      flip: false,
      rotate: 13 
    } }];
  var easing = Easing.easeInOutQuint;
  var duration = 1000;
  var instances = {};
  function init() {
    getContainer_();
    initSlider_();
    initPrism_();
    addNavigation_();
    addEvents_();
  }
  function getContainer_() {
    container.element = document.querySelector(container.selector);
  }
  function initSlider_() {

    instances.slider = new PrismSlider({
      container: container,
      slides: slides,
      mask: false,
      duration: duration,
      easing: easing });
    instances.slider.init();
  }
  function initPrism_() {
    masks.forEach(function (mask, i) {
      var name = 'mask_' + i;
      instances[name] = new PrismSlider({
        container: container,
        slides: slides,
        mask: mask, 
        duration: duration,
        easing: easing });
      instances[name].init();
    });
  }
  function addNavigation_() {
    navigation.element = document.querySelector(navigation.selector);
    slides.forEach(function (slide, i) {
      var bullet = document.createElement(navigation.bullet);
      bullet.setAttribute(navigation.attrs.index, i);
      if (i === 0) bullet.className = navigation.attrs.active;

      navigation.element.appendChild(bullet);
    });
  }
  function addEvents_() {
    navigation.element.addEventListener('click', function (e) {
      var bullet = e.target;
      var isBullet = bullet.nodeName === navigation.bullet.toUpperCase();
      if (isBullet && !instances.slider.isAnimated) {
        for (var i = 0; i < navigation.element.childNodes.length; i++) {if (window.CP.shouldStopExecution(0)) break;
          navigation.element.childNodes[i].className = '';
        }
        window.CP.exitedLoop(0);bullet.className = navigation.attrs.active;
        var index = Number(bullet.getAttribute(navigation.attrs.index));
        slideAllTo_(index);
      }

    });
  }
  function slideAllTo_(index) {
    for (var key in instances) {
      if (instances.hasOwnProperty(key)) {
        instances[key].slideTo(index);
      }
    }
  }
  return {
    init: init };
}(window);
window.onload = slideshow.init;
    </script>
</body>
</html>

4. By Foka Olsen

Made by Foka Olsen. Bootstrap Slideshow with Pagination Buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
  <style>
    .carousel-caption {
      text-shadow: none !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: 'Lato', sans-serif !important;
    }

    .container {
      height: 500px !important;
      background-image: url(https://images.pexels.com/photos/42408/pexels-photo-42408.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
      background-size: cover;
      background-position: center center;
    }

    .item {
      background: rgb(0, 0, 0);
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 80%);
      /*background-color:rgba(0,0,0,0.4);*/
      width: 100%;
      height: 100%;
    }


    /* Small devices (landscape phones, 576px and up)*/

    @media (max-width: 600px) {
      .container {
        500px !important;

      }
      .carousel-caption {
        font-weight: normal !important;

        font-size: 1em !important;
        line-height: 1.1em !important;
        padding-bottom: 2em !mportant;
      }
      .carousel-caption h3 {
        font-size: 160% !important;
      }

    }

    /* Medium devices (tablets, 768px and up)*/

    @media (min-width: 601px) {


      .carousel-caption p {

        font-size: 1.1em !important;
        text-align: left !important;
        text-align: justify !important;
        text-justify: inter-word !important;
      }
    }

    /* Large devices (desktops, 992px and up)*/

    @media (min-width: 992px) {



      .carousel-caption p {

        font-size: 1.1em !important;
        text-align: left !important;
        text-align: justify !important;
        text-justify: inter-word !important;

      }
    }

    /*Extra large devices (large desktops, 1200px and up)*/

    @media (min-width: 1200px) {
      .carousel-caption p {

        font-size: 1.1em !important;
        text-align: left !important;
        text-align: justify !important;
        text-justify: inter-word !important;
      }

    }
  </style>
</head>
<body>
  <div class="container" style="overflow:hidden;width:100%;max-height:100%;padding-left:0em;padding-right:0em;  
 ">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
        <li data-target="#myCarousel" data-slide-to="5"></li>
        <li data-target="#myCarousel" data-slide-to="6"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="https://images.pexels.com/photos/935756/pexels-photo-935756.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=500" alt="Los Angeles" style="width:100%; height:500px;opacity:0;">
          <div class="carousel-caption">
            <h3>01</h3>
            <p>Text</p>
          </div>
        </div>

        <div class="item">
          <img src="https://images.pexels.com/photos/2041627/pexels-photo-2041627.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=500" alt="Chicago" style="width:100%; height:500px;opacity:0;">
          <div class="carousel-caption">
            <h3>02</h3>
            <p>Text</p>
          </div>
        </div>

        <div class="item">
          <img src="https://images.pexels.com/photos/842567/pexels-photo-842567.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=500" alt="New york" style="width:100%; height:500px;opacity:0;">
          <div class="carousel-caption">
            <h3>03</h3>
            <p>Text</p>
          </div>
        </div>

        <div class="item">
          <img src="https://images.pexels.com/photos/842567/pexels-photo-842567.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=500" alt="New york" style="width:100%; height:500px;opacity:0;">
          <div class="carousel-caption">
            <h3>04</h3>
            <p>Text</p>
          </div>
        </div>

        <div class="item">
          <img src="https://images.pexels.com/photos/842567/pexels-photo-842567.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=500" alt="New york" style="width:100%; height:500px;opacity:0;">
          <div class="carousel-caption">
            <h3>05</h3>
            <p>Text</p>
          </div>
        </div>

        <div class="item">
          <img src="https://images.pexels.com/photos/842567/pexels-photo-842567.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=500" alt="New york" style="width:100%; height:500px;opacity:0;">
          <div class="carousel-caption">
            <h3>06</h3>
            <p>Text</p>
          </div>
        </div>

        <div class="item">
          <img src="https://images.pexels.com/photos/842567/pexels-photo-842567.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=500" alt="New york" style="width:100%; height:500px;opacity:0;">
          <div class="carousel-caption">
            <h3>07</h3>
            <p>Text</p>
          </div>
        </div>

      </div>
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
    </div>
  </div>
  </div>
</body>
</html>

5. By Dustin Keppler

Made by Dustin Keppler. Auto Bootstrap Slideshow. Source

<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  </head>
   <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
 
          <div id="my-slider" class="carousel slide" data-ride="carousel">
            
            <!-- indicators dot nav-->
            <ol class="carousel-indicators">
              <li data-target="#my-slider" data-slide-to="0" class="active"></li>
              <li data-target="#my-slider" data-slide-to="1"></li>
            </ol>
            
            <!-- wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="https://static.pexels.com/photos/46174/strawberries-berries-fruit-freshness-46174.jpeg" alt="strawberries" />
                <div class="carousel-caption">
                  <h1>Strawberries</h1>
                </div>
              </div>
              <div class="item">
                <img src="https://static.pexels.com/photos/235294/pexels-photo-235294.jpeg" alt="assorted fruits" />
                <div class="carousel-caption">
                  <h1>Assorted Fruit</h1>
                </div>
              </div>
            </div>
            
            <!-- controls or next and prev buttons -->
            <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            
          </div>
          
        </div> <!-- end column -->
      </div> <!-- end row-->
     </div> <!-- end container-->

        <script
      src="https://code.jquery.com/jquery-3.2.1.js"
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
      crossorigin="anonymous"></script>
         <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

6. By Angel

Made by Angel. Bootstrap Product Slideshow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Lato|Raleway|Roboto|Source+Sans+Pro');

a {text-decoration: none;}
.room:hover a {text-decoration: none important}

.ebay-carrusel {width: 100%;
max-height: 20vw;
  display: grid;
  padding: 0 auto;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(27.9vw, 27.9vw);
}
.carusel-description {padding-top: 2em;}
.carusel-description h1
{color: #E0F8F7;
font-family: source sans pro;
font-variant: small-cap;}


.carusel-description h4 {color: #E0F8F7;
font-family: raleway;
font-variant: smallcaps;
margin-top: 1em;}


.ebay-arrow {-webkit-transition-duration:3s ;
  transition-duration: 3s;
  width: 100%;
  height: 3em;
  display: flex;
  flex-direction: row;
  margin-top: 2em;
}
.ebay-arrow button {color: #e0f8f7;
background-color: #1976d2;
border: none;
font-family: raleway;
font-size: 17px;
font-weight: 500;
}


.ebay-arrow  i {color: #e0f8f7;
font-size: 25px;
position:relative;
top: 3px}
.ebay-png {padding-top: 1em;
  width:70%;
height: 20vw;
  margin: auto;
padding: auto;}

.room2 h3 { font-size: 25px;
color: #1976d2;
font-family: raleway;}

.room3 h3 {font-size: 25px;
color: #e0f8f7;
font-family: raleway;}

.room4 h3 {font-size: 25px;
color: #1976d2;
font-family: raleway;}

  .room1 {background-color: #1976D2;
padding:0 1em;
padding-left: 2em:}
.room1:hover .ebay-arrow {padding-left: 45px;
  cursor: pointer;
}
  .room2 {background-color: #BBDEFB;}
  .room3 {background-color: #536DFE;}
  .room4 {background-color: #00BCD4;}
/*second image*/

.room6 h3 { font-size: 25px;
color: #009688;
font-family: raleway;}

.room7 h3 {font-size: 25px;
color: #CDDC39;
font-family: raleway;}

.room8 h3 {font-size: 25px;
color: #DCEDC8;
font-family: raleway;}

  .room5 {background-color: #388E3C;
padding:0 1em;}
.room5:hover .ebay-arrow {padding-left: 45px;
  cursor: pointer;
}
 .room6 {background-color: #DCEDC8;}
  .room7 {background-color: #009688;}
  .room8 {background-color: #8BC34A;}


/*third image*/

.botones {color: #fff3e0;
background-color: #F57C00;
border: 1.5px #fff3e0 solid;
font-family: raleway;
font-size: 17px;
font-weight: 500;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}
.botones:hover {background-color: #fff3e0;
color: #F57C00;}


.ebayPng {padding-top: em;
  width:100%;
height: 100%;
  max-height: 27.9vw;
  margin: auto;
padding: auto;}

.room9 h3 { font-size: 25px;
color: #1976d2;
font-family: raleway;}

  .room9 {background-color: #F57C00;
padding:0 1em;
    text-align: center;
}
.room9:hover .ebay-arrow {padding-left: 45px;
  cursor: pointer;
}
  .room10 {background-color: #BBDEFB;
z-index: 11;
grid-column: 2/5;}
@media (max-width: 1100px) {
  .carusel-description {padding-top: 0;}
}


@media (max-width: 1000px) {.carousel .item{min-height: 30vw !important;}
  .room2 h3 { font-size: 3vw;
color: #1976d2}
  .carusel-description {padding-top: 0;}
  .room3 h3 { font-size: 2vw;}
  .room4 h3 {font-size: 2vw;}
    .room6 h3 { font-size: 3vw;
color: #1976d2}
  
  .room7 h3 { font-size: 2vw;}
  .room8 h3 {font-size: 2vw;}
   .ebay-carrusel {grid-auto-rows: minmax(15vw, 15vw)}
  .right-png {width: 20%;
  height: 10vw;
  padding-top: 0}
  .ebay-carrusel {}
  
  .room1 {grid-row: 1/3;}
  .room2 {grid-row: 1/3;}
  .room3 {grid-column:3/5;
  grid-row: 1/2;}
  .room4 {grid-column:3/5;
  grid-row: 2/3;}
  .room5 {grid-row: 1/3;}
  .room6 {grid-row: 1/3;}
  .room7 {grid-column:3/5;
  grid-row: 1/2;}
  .room8 {grid-column:3/5;
  grid-row: 2/3;}
.room9 {grid-row: 1/3;
  grid-column: 1/2;}
  .room10 {grid-row: 1/3;
  grid-column: 2/5}
  .ebayPng {max-height: 30vw;
  height: 31vw;}
}
@media (max-width: 950px) {.carousel {min-height: 30vw;}} 
@media (max-width: 800px) {.carusel-description h4 {margin-top: -10px;}
  .carusel-description h1 {font-size: 25px;}
  .ebay-arrow {margin-top: -13px}
}
@media (max-width: 660px) {.carousel .item{min-height: 60vw !important;}
  .ebay-carrusel {grid-auto-rows: minmax(15vw, 20vw)}
  .carusel-description h1 {font-size: 3.5vw;}
  .carusel-description h4{font-size: 2vw;
  margin-top: -10px;
    width: 100%;
  text-align: center;}
  .ebay-arrow  button {font-size: 3vw;}
  .ebay-arrow  i {font-size: 3vw;}
  .right-png {padding-top: .5em;}
  .ebay-arrow {display: none;}
  .room1 {grid-row: 1/2;
  grid-column: 1/5;
  text-align: center;}
  .room2 {grid-row: 2/4;
  grid-column: 1/2}
  .room3 {grid-column:2/5;
  grid-row: 3/4;}
  .room4 {grid-column:2/5;
  grid-row: 2/3;}
  .room5 {grid-row: 1/2;
  grid-column: 1/5;
  text-align: center;}
  .room6 {grid-row: 2/4;
  grid-column: 1/2}
  .room7 {grid-column:2/5;
  grid-row: 3/4;}
  .room8 {grid-column:2/5;
  grid-row: 2/3;}
  .room9 {grid-row: 1/2;
  grid-column: 1/5;
  text-align: center;}
  .room10 {grid-row: 2/4;
  grid-column: 1/5}
  .ebayPng {max-height: 50vw;
  height: 100%;}
  .botones {width: 19vw;
    font-size: 3vw
  }
}
@media (max-width: 430px) {
  .carusel-description h1 {font-size: 18px;
  text-align: center;}
.carusel-description h4 {font-size: 10px;
  margin-bootom: 0;}
  .ebay-arrow  {display: none;}
 .botones {width: 12vw;
   min-width: auto;
    font-size: 2vw;
   margin-top: -200px !important;
  }}
@media (max-width: 360px) {
  .carusel-description h1 {font-size: 8px;
  text-align: center;
  margin-top: 3px}
.carusel-description h4 {font-size: 6px}
  .ebay-carrusel {grid-auto-rows: minmax(20vw, 20vw)}
  .botones {font-size: 7px;}
}
</style>
</head>
<body>
<style type="text/css">
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel .item{height: auto;
    min-height: 26.6vw; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
        .carousel-control.left, .carousel-control.right {
   background-image:none !important;
   filter:none !important;
}
  }
.carousel .item {
    margin: 0 auto; /* Align slide image horizontally center */
}
.bs-example{
	margin: 0px;
}
</style>
<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   
        <div class="carousel-inner">
            <div class="item active">
              <div class="ebay-carrusel" alt="First Slide">
  <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php" target="_blank" class="room room1"><div class="carusel-description"><h1>Lorem ipsum dolor sit. </h1>
    <h4>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti.</h4><div class="ebay-arrow"><div class="only"><button class="boton">Llevame</button><i class="fa fa-angle-right	"></i></div></div>
</div></a>
    <div class="room room2">
       <center>
         <img class="ebay-png"src="https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png/revision/latest?cb=20120718024112">
         
         <h3>producto1</h3>
         
      </center>
  </div>
    <div class="room room3">
       <center>
         <img class="ebay-png right-png"src="https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png/revision/latest?cb=20120718024112">
         
         <h3>producto1</h3>
         
      </center>
  </div>
  <div class="room room4">
     <center>
         <img class="ebay-png right-png"src="https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png/revision/latest?cb=20120718024112">
         
         <h3>producto1</h3>
         
      </center>
  </div>
</div>
            </div>
            <div class="item">
               <div class="ebay-carrusel" alt="Second Slide">
  <a class="room room5"><div class="carusel-description"><h1>Lorem ipsum dolor sit. </h1>
    <h4>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti.</h4><div class="ebay-arrow"><div class="only"><button style="background-color: #388E3C !important"class="boton">Llevame</button><i class="fa fa-angle-right	"></i></div></div>
</div></a>
    <div class="room room6">
       <center>
         <img class="ebay-png"src="https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png/revision/latest?cb=20120718024112">
         
         <h3>producto1</h3>
         
      </center>
  </div>
    <div class="room room7">
       <center>
         <img class="ebay-png right-png"src="https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png/revision/latest?cb=20120718024112">
         
         <h3>producto1</h3>
         
      </center>
  </div>
  <div class="room room8">
     <center>
         <img class="ebay-png right-png"src="https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png/revision/latest?cb=20120718024112">
         
         <h3>producto1</h3>
         
      </center>
  </div>
</div>
            </div>
            <div class="item">
                 <div class="ebay-carrusel" alt="Third Slide">
  <div class="room room9"><div class="carusel-description"><h1>Lorem ipsum dolor sit. </h1>
    <h4>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti.</h4><div class="only"><a href="https://www.ebay.com" target="_blank"><button class="botones">Llevame</button></a></div>
</div></div>
    <div class="room room10">
       <center>
         <img class="ebayPng"src="https://images.pexels.com/photos/1409716/pexels-photo-1409716.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">  
      </center>
  </div>
</div>
            </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
var touchSensitivity = 5;
$(".carousel").on("touchstart", function (event) {
  var xClick = event.originalEvent.touches[0].pageX;
  $(this).one("touchmove", function (event) {
    var xMove = event.originalEvent.touches[0].pageX;
    if (Math.floor(xClick - xMove) > touchSensitivity) {
      $(this).carousel('next');
    } else if (Math.floor(xClick - xMove) < -touchSensitivity) {
      $(this).carousel('prev');
    }
  });
  $(".carousel").on("touchend", function () {
    $(this).off("touchmove");
  });
});
    </script>
</body>
</html>