29+ Bootstrap Slider Examples

This post contains a total of 29+ Bootstrap Slider Examples with Source Code. All these Bootstrap Sliders are made using Bootstrap Framework.

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

Related Posts

Bootstrap Slider Examples

1. By BBBootstrap Team

Made by BBBootstrap Team. Bootstrap 4 image carousel slider with description, Clicking the right and left arrows changes the image and description. Source

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

<body className='snippet-body'>
                                <div class="py-5" style="background-color:#E0E0E0;" id="venue">
    <div class="container">
        <div class="row bg-primary animate-in-down">
            <div class="p-4 col-md-6 align-self-center text-color">
                <p class="m-0">Feel comfortable, and purchase items</p>
                <h2>Discover the products</h2>
                <p class="my-4">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here</p> <a href="#" class="btn mb-3 p-2 btn-light">View the gallery</a>
            </div>
            <div class="p-0 col-md-6">
                <div class="carousel slide" data-ride="carousel" id="carousel1">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item"> <img class="d-block img-fluid w-100" src="https://i.imgur.com/K7A78We.jpg" alt="first slide">
                            <div class="carousel-caption">
                                <h3>Simura Hotels</h3>
                                <p>Good architecture, services</p>
                            </div>
                        </div>
                        <div class="carousel-item active"> <img class="d-block img-fluid w-100" src="https://i.imgur.com/c8952Iz.jpg" data-holder-rendered="true">
                            <div class="carousel-caption">
                                <h3>Hauzkhas Village Bar</h3>
                                <p>Enjoy our long drink</p>
                            </div>
                        </div>
                        <div class="carousel-item"> <img class="d-block img-fluid w-100" src="https://i.imgur.com/K7A78We.jpg" data-holder-rendered="true">
                            <div class="carousel-caption">
                                <h3>Cooking Hemorto</h3>
                                <p>Tastes it better</p>
                            </div>
                        </div>
                    </div> <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                </div>
            </div>
        </div>
    </div>
</div>
                                <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>


-------CSS-------


::-webkit-scrollbar {
                                  width: 8px;
                                }
                                /* Track */
                                ::-webkit-scrollbar-track {
                                  background: #f1f1f1; 
                                }
                                 
                                /* Handle */
                                ::-webkit-scrollbar-thumb {
                                  background: #888; 
                                }
                                
                                /* Handle on hover */
                                ::-webkit-scrollbar-thumb:hover {
                                  background: #555; 
                                } .text-color {
    color: #fff
}

.carousel-item img {
    height: 400px
}

2. By Start Bootstrap

Made by Start Bootstrap. Bootstrap Half Page Image Slider, the slides change automatically, and you can also manually change them by clicking the arrow or the lines. Source

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<header>

  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active" style="background-image: url('https://source.unsplash.com/RCAhiGJsUUE/1920x1080')">
        <div class="carousel-caption">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
        </div>
      </div>
      <div class="carousel-item" style="background-image: url('https://source.unsplash.com/wfh8dDlNFOk/1920x1080')">
        <div class="carousel-caption">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
        </div>
      </div>
      <div class="carousel-item" style="background-image: url('https://source.unsplash.com/lHGeqh3XhRY/1920x1080')">
        <div class="carousel-caption">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</header>

<!-- Page Content -->
<section class="py-5">
  <div class="container">
    <h1 class="fw-light">Half Page Image Slider</h1>
    <p class="lead">The background images for the slider are set directly in the HTML using inline CSS. The images
      in this snippet are from <a href="https://unsplash.com">Unsplash</a>!</p>
  </div>
</section>



---------CSS---------


.carousel-item {
  height: 65vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

3. By LuisCode

Made by LuisCode. Vertical Carousel. Source

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat'>
<h1>Carousel</h1>
<div class="container">
    <div class="card">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="bgTitle"></div>
                <div class="carousel-item active">
                    <div class="row h-100 align-items-center">
                        <div class="col-lg-6 d-flex justify-content-center align-items-center title">
                            <h3>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales, metu
                            </h3>
                        </div>
                        <div class="col-lg-6 content">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales, metus ac
                            fringilla suscipit, nulla massa mollis leo, ut maximus odio ex sit amet elit. Nullam varius
                            ante orci, quis rhoncus velit tempor sit amet. Nulla lacinia, sem sed euismod dignissim,
                            ante nibh iaculis
                            <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
                        </div>
                    </div>
                </div>
        <div class="carousel-item">
                    <div class="row h-100 align-items-center">
                        <div class="col-lg-6 d-flex justify-content-center align-items-center title">
                            <h3>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales, metu
                            </h3>
                        </div>
                        <div class="col-lg-6">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales, metus ac
                            fringilla suscipit, nulla massa mollis leo, ut maximus odio ex sit amet elit. Nullam varius
                            ante orci, quis rhoncus velit tempor sit amet. Nulla lacinia, sem sed euismod dignissim,
                            ante nibh iaculis
                            <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
                        </div>
                    </div>
                    <!--<button class="btn btn-next">Next</button>-->
                </div>
                    <div class="carousel-item">
                    <div class="row h-100 align-items-center">
                        <div class="col-lg-6 d-flex justify-content-center align-items-center title">
                            <h3>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales, metu
                            </h3>
                        </div>
                        <div class="col-lg-6">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales, metus ac
                            fringilla suscipit, nulla massa mollis leo, ut maximus odio ex sit amet elit. Nullam varius
                            ante orci, quis rhoncus velit tempor sit amet. Nulla lacinia, sem sed euismod dignissim,
                            ante nibh iaculis
                            <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
                        </div>
                    </div>
                    <!--<button class="btn btn-next">Next</button>-->
                </div>
            </div>
        </div>
                          <button class="btn btn-next">Next</button>
    </div>

</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js'></script>


----------CSS-----------


html, body, .container, .carousel, .carousel-inner, .carousel-item{
  height: 100%
}
body{
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  font-family: 'Montserrat', sans-serif;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}
h1{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  color: #fff;
}

.card{
  border-radius: 20px;
  height: 500px;
  width: 90%;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  border: none;
}

.carousel-item{
  z-index: 2;
  /*padding: 10px 25px;*/
}
.carousel-item > .row{
  margin: 0;
}
.title{
  color: #fff;
  text-align: center;
}
.bgTitle{
    background-color: #316e99;
    position: absolute;
    z-index: 1;
}

.title h3{
  text-shadow: 0px 3px 3px rgba(0,0,0,0.2);
}

.btn-next{
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 100px;
  border-radius: 20px;
  background-color: #316e99;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  z-index: 3;
}

input{
  background-color: transparent !important;
}

/*-- vertical bootstrap slider --*/
.carousel .carousel-item-next.carousel-item-left,
.carousel .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.carousel .carousel-item-next,
.carousel .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100% 0);
}

.carousel .carousel-item-prev,
.carousel .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}

/*-- vertical carousel indicators --*/
.carousel-indicators{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 40px;
    right: 0px;
    left: auto;
    width :auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.carousel-indicators li{
    display: block;
    margin-bottom: 0px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: #BDBDBD;
    transition: all ease 0.6s;
}
.carousel-indicators li.active{
    background: #000;
    width: 20px;
    border-radius: 25px;
}
/* Media Querys */
/* Small devices (landscape phones, 576px and up)*/ 
@media (min-width: 576px) {
  .bgTitle{
    height: 30%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 100%;
    top: 0;
  }
  .content{
    padding: 15px;
  }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .bgTitle{
    height: 100%;
    width: 50%;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 0px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}


--------JS----------


$('.carousel').carousel({
  interval: 0 });

$('.btn-next').click(function () {
  $('.carousel').carousel('next');
});

4. By afmarchetti

Made by afmarchetti. Bootstrap Slider Full Screen with Animations, clicking the arrow keys changes the slides. It also automatically changes slides. Source

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'>

<!-- Full Page Image Background Carousel Header -->
  <div id="myCarousel" class="carousel slide">
        <!-- 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>

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://www.marchettidesign.net/demo/optimized-bootstrap/code.jpg');"></div>
                <div class="carousel-caption">
                     <h2 class="animated fadeInLeft">Caption Animation</h2>
                     <p class="animated fadeInUp">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                     <p class="animated fadeInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Learn More</a></p>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://www.marchettidesign.net/demo/optimized-bootstrap/conference.jpg');"></div>
                <div class="carousel-caption">
                     <h2 class="animated fadeInDown">Caption Animation</h2>
                     <p class="animated fadeInUp">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                     <p class="animated fadeInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Learn More</a></p>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://www.marchettidesign.net/demo/optimized-bootstrap/campus.jpg');"></div>
                <div class="carousel-caption">
                     <h2 class="animated fadeInRight">Caption Animation</h2>
                     <p class="animated fadeInRight">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                     <p class="animated fadeInRight"><a href="#" class="btn btn-transparent btn-rounded btn-large">Learn More</a></p>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>

    </div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>


----------CSS-----------


html,
body {
    height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
  height: 100%;
  background: #000;
}

.carousel-caption{padding-bottom:80px;}

h2{font-size: 60px;}
p{padding:10px}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    opacity:0.6;
}




/**
 * Button
 */
.btn-transparent {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-transparent:hover {
  background-color: #fff;
}

.btn-rounded {
  border-radius: 70px;
}

.btn-large {
  padding: 11px 45px;
  font-size: 18px;
}

/**
 * Change animation duration
 */
.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

5. By BBBootstrap Team

Made by BBBootstrap Team. Pure CSS image carousel slider with clip path animation, clicking the three dots will change the slides. Source

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<style>::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1; 
}
                                 
/* Handle */
::-webkit-scrollbar-thumb {
background: #888; 
}
                                
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555; 
} *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
    padding:10px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dc3545;
}
.wrapper{
  position: relative;
  width: 700px;
  height: 400px;
}
.wrapper .img{
  position: absolute;
  width: 100%;
  height: 100%;
      border-radius: 12px;
    overflow: hidden;
}
.wrapper .img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  clip-path: circle(0% at 0% 100%);
  transition: all 0.7s;
}
#one:checked ~ .image-1 img{
  clip-path: circle(150% at 0% 100%);
}
#two:checked ~ .image-1 img,
#two:checked ~ .image-2 img{
  clip-path: circle(150% at 0% 100%);
}
#three:checked ~ .image-1 img,
#three:checked ~ .image-2 img,
#three:checked ~ .image-3 img{
  clip-path: circle(150% at 0% 100%);
}
#four:checked ~ .image-1 img,
#four:checked ~ .image-2 img,
#four:checked ~ .image-3 img,
#four:checked ~ .image-4 img{
  clip-path: circle(150% at 0% 100%);
}
#five:checked ~ .image-1 img,
#five:checked ~ .image-2 img,
#five:checked ~ .image-3 img,
#five:checked ~ .image-4 img,
#five:checked ~ .image-5 img{
  clip-path: circle(150% at 0% 100%);
}
.wrapper .sliders{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
}
.wrapper .sliders label{
      border: 2px solid #dc3545;
    width: 13px;
    height: 13px;
    margin: 0 3px;
    border-radius: 23%;
    cursor: pointer;
    transition: all 0.3s ease;
}
#one:checked ~ .sliders label.one,
#two:checked ~ .sliders label.two,
#three:checked ~ .sliders label.three,
#four:checked ~ .sliders label.four,
#five:checked ~ .sliders label.five{
  width: 35px;
    border-radius: 2px;
    background: #dc3545;
}
.sliders label:hover{
  background: #dc3545;
}
input[type="radio"]{
  display: none;
}</style>
                                
      <div class="wrapper">
      <input type="radio" name="slide" id="one" checked>
      <input type="radio" name="slide" id="two">
      <input type="radio" name="slide" id="three">
      <input type="radio" name="slide" id="four">
      <input type="radio" name="slide" id="five">
      <div class="img image-1">
         <img src="https://i.imgur.com/C0JMOwg.jpg" alt="">
      </div>
      <div class="img image-2">
        <img src="https://i.imgur.com/WfInCoc.jpg" alt="">
      </div>
      <div class="img image-3">
        <img src="https://i.imgur.com/C0JMOwg.jpg" alt="">
      </div>
      <div class="img image-4">
        <img src="https://i.imgur.com/WfInCoc.jpg" alt="">
      </div>
      <div class="img image-5">
        <img src="https://i.imgur.com/C0JMOwg.jpg" alt="">
      </div>
      <div class="sliders">
        <label for="one" class="one"></label>
        <label for="two" class="two"></label>
        <label for="three" class="three"></label>
        <label for="four" class="four"></label>
        <label for="five" class="five"></label>
      </div>
    </div>
    <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>

6. By itchief

Made by itchief. A very simple Slider. Source

 <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>

 <div class="carousel-wrapper">
    <div id="demo" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/1920x1080/e91e63/fff?text=Los_Angeles" alt="Los Angeles">
          <div class="carousel-caption">
            <h3>Name</h3>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/1920x1080/3f51b5/fff?text=Chicago" alt="Chicago">
          <div class="carousel-caption">
            <h3>Surnme</h3>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/1920x1080/673ab7/fff?text=New_York" alt="New York">
          <div class="carousel-caption">
            <h3>BBBa</h3>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
  </div>
  
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>


--------CSS----------


.carousel-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .carousel {
      width: 50vw;
      height: 50vh;
      overflow: hidden;
    }

    .carousel-item img {
      width: 50vw;
      height: 50vh;
    }

7. By BBBootstrap Team

Made by BBBootstrap Team. Bootstrap 4 testimonials auto carousel slider with image and content. Source

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
                                <link href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' rel='stylesheet'>
                                <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                                <style>::-webkit-scrollbar {
                                  width: 8px;
                                }
                                /* Track */
                                ::-webkit-scrollbar-track {
                                  background: #f1f1f1; 
                                }
                                 
                                /* Handle */
                                ::-webkit-scrollbar-thumb {
                                  background: #888; 
                                }
                                
                                /* Handle on hover */
                                ::-webkit-scrollbar-thumb:hover {
                                  background: #555; 
                                } body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: rgb(233, 150, 150);
    font-family: 'Open Sans';
}
#demo{
    background: linear-gradient(112deg, #ffffff 50%, antiquewhite 50%);
    max-width: 900px;
    margin: auto;
}
.carousel-caption {
    position: initial;
    z-index: 10;
    padding: 5rem 8rem;
    color: rgba(78, 77, 77, 0.856);
    text-align: center;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: bold;
    line-height: 2rem;
}
@media(max-width:767px){
    .carousel-caption {
        position: initial;
        z-index: 10;
        padding: 3rem 2rem;
        color: rgba(78, 77, 77, 0.856);
        text-align: center;
        font-size: 0.7rem;
        font-style: italic;
        font-weight: bold;
        line-height: 1.5rem;
    }
}
.carousel-caption img{
    width: 6rem;
    border-radius: 5rem;
    margin-top: 2rem;
}
@media(max-width:767px){
    .carousel-caption img{
        width: 4rem;
        border-radius: 4rem;
        margin-top: 1rem;
    }
}
#image-caption{
    font-style: normal;
    font-size: 1rem;
    margin-top: 0.5rem;
}
@media(max-width:767px){
    #image-caption{
        font-style: normal;
        font-size: 0.6rem;
        margin-top: 0.5rem;
    }
}
i{
    background-color: rgb(223, 56, 89);
    padding: 1.4rem;
}
@media(max-width:767px){
    i{
        padding: 0.8rem;
    }
}
.carousel-control-prev{
    justify-content: flex-start;
}

.carousel-control-next {
    justify-content: flex-end;
}
.carousel-control-prev,.carousel-control-next{
    transition: none;
    opacity: unset;
}</style>
                                
                                <body className='snippet-body'>
                                <div class="container">
            <div id="demo" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <div class="carousel-caption">
                      <p>If Shai Reznik's TDD videos don't convince you to add automated testing your code,
                          I don't know what will.This was the very best explanation of frameworks for brginners 
                          that I've ever seen.
                      </p>
                      <img src="https://i.imgur.com/lE89Aey.jpg">
                      <div id="image-caption">Nick Doe</div>
                    </div>   
                  </div>
                  <div class="carousel-item">
                    <div class="carousel-caption">
                      <p>If Shai Reznik's TDD videos don't convince you to add automated testing your code,
                        I don't know what will.This was the very best explanation of frameworks for brginners 
                        that I've ever seen.</p>
                        <img src="https://i.imgur.com/QptVdsp.jpg" class="img-fluid">
                        <div id="image-caption">Cromption Greves</div>
                    </div>   
                  </div>
                  <div class="carousel-item">
                    <div class="carousel-caption">
                      <p>If Shai Reznik's TDD videos don't convince you to add automated testing your code,
                        I don't know what will.This was the very best explanation of frameworks for brginners 
                        that I've ever seen.</p>
                        <img src="https://i.imgur.com/jQWThIn.jpg" class="img-fluid">
                        <div id="image-caption">Harry Mon</div>
                    </div>   
                  </div>
                </div>
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                  <i class='fas fa-arrow-left'></i>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                  <i class='fas fa-arrow-right'></i>
                </a>
              </div>
              
        </div>
                                <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>

8. By BBBootstrap Team

Made by BBBootstrap Team. Bootstrap 4 our client section with carousel slider. Source

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
                                <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                                <style>::-webkit-scrollbar {
                                  width: 8px;
                                }
                                /* Track */
                                ::-webkit-scrollbar-track {
                                  background: #f1f1f1; 
                                }
                                 
                                /* Handle */
                                ::-webkit-scrollbar-thumb {
                                  background: #888; 
                                }
                                
                                /* Handle on hover */
                                ::-webkit-scrollbar-thumb:hover {
                                  background: #555; 
                                }  body {
     background-color:#4A148C;
 }

 .card {
    position: relative;
    display: flex;
    width: 100px;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #d2d2dc;
    border-radius: 11px;
    -webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
    -moz-box-shadow: 0px 0px 5px 0px rgba(212,182,212,1);
    box-shadow: 0px 0px 5px 0px rgb(161, 163, 164);
}

 .card .card-body {
        padding: 1rem 1rem;
 }

 .card-body {
     flex: 1 1 auto;
     padding: 1.25rem;
 }

 .logo{
        height: 67px;
 }


.items {
    width: 90%;
    margin: 0px auto;
    margin-top: 250px;
}

.slick-slide {
    margin: 10px;
}
</style>

                                
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="items"> 
  
  
                <div class="card">
                    <div class="card-body"> 
                        <img class="logo" src="https://img.icons8.com/color/100/000000/google-logo.png">
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/100/000000/linkedin.png">
                    </div>
                </div>



                <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/100/000000/yahoo.png">
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/100/000000/amazon.png">
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/48/000000/netflix.png">
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/ios-filled/100/000000/mac-os.png">
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/48/000000/dell--v1.png">
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/100/000000/hp.png">
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/100/000000/ebay.png">
                    </div>
                </div>

               <!---->

                 <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/100/000000/ibm.png">
                    </div>
                </div>



                 <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/100/000000/sap.png">
                    </div>
                </div>

                 <div class="card">
                    <div class="card-body">
                        <img class="logo" src="https://img.icons8.com/color/100/000000/ebay.png">
                    </div>
                </div>

</div>  
                                <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>

9. By BBBootstrap Team

Made by BBBootstrap Team. Bootstrap 4 simple slick carousel slider. Source

<!doctype html>
                        <html>
                            <head>
                                <meta charset='utf-8'>
                                <meta name='viewport' content='width=device-width, initial-scale=1'>
                                <title>Bootstrap 4 simple slick carousel slider</title>
                                <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
                                <link href='#' rel='stylesheet'>
                                <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                                <style>::-webkit-scrollbar {
                                  width: 8px;
                                }
                                /* Track */
                                ::-webkit-scrollbar-track {
                                  background: #f1f1f1; 
                                }
                                 
                                /* Handle */
                                ::-webkit-scrollbar-thumb {
                                  background: #888; 
                                }
                                
                                /* Handle on hover */
                                ::-webkit-scrollbar-thumb:hover {
                                  background: #555; 
                                } html, body{
  background-color: #039BE5
}
.items{
  width:90%;
  margin:0px auto;
  margin-top: 100px;
}
.slick-slide{
  margin:10px;
}
.slick-slide img{
  width:100%;
  border: 0px solid #fff;
}</style>
                                </head>
                                <body className='snippet-body'>
                                 <!--Slick Carousel Slider-->
       <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css"/>
      <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
 
 <div class="items">
                <div><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190720/gallery/preview/02_o_car.jpg"></div>
                <div><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190715/gallery/preview/03_r_car.jpg"></div>
                <div><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190714/gallery/preview/04_g_car.jpg"></div>
                <div><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190714/gallery/preview/04_g_car.jpg"></div>
                <div><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190714/gallery/preview/04_g_car.jpg"></div>
                <div><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190714/gallery/preview/04_g_car.jpg"></div>
                <div><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190714/gallery/preview/04_g_car.jpg"></div>
            </div>



                                <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
                                <script type='text/javascript' src='#'></script>
                                <script type='text/javascript' src='#'></script>
                                <script type='text/javascript' src='#'></script>
                                <script type='text/javascript'>$(document).ready(function(){
     
     $('.items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});
          });</script>
                                <script type='text/javascript'>var myLink = document.querySelector('a[href="#"]');
                                myLink.addEventListener('click', function(e) {
                                  e.preventDefault();
                                });</script>
                            
                                </body>
                            </html>

10. By BootStrap Team

Made by Bootstrap Team. Simple image carousel slider with thumbnails. Source

<!doctype html>
                        <html>
                            <head>
                                <meta charset='utf-8'>
                                <meta name='viewport' content='width=device-width, initial-scale=1'>
                                <title>simple image carousel slider with thumbnails</title>
                                <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' rel='stylesheet'>
                                <link href='#' rel='stylesheet'>
                                <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                                <style>::-webkit-scrollbar {
                                  width: 8px;
                                }
                                /* Track */
                                ::-webkit-scrollbar-track {
                                  background: #f1f1f1; 
                                }
                                 
                                /* Handle */
                                ::-webkit-scrollbar-thumb {
                                  background: #888; 
                                }
                                
                                /* Handle on hover */
                                ::-webkit-scrollbar-thumb:hover {
                                  background: #555; 
                                } body {
    background-color: #eee
}

.carousel-inner img {
    width: 100%
}

.carousel-item img {
    width: 320px;
    height: 240px !important
}

#myCarousel .carousel-indicators {
    position: static;
    margin-top: 0px
}

#myCarousel .carousel-indicators>li {
    width: 100px
}

#myCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}

#myCarousel .carousel-indicators li.active img {
    opacity: 1
}

#myCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}</style>
                                </head>
                                <body className='snippet-body'>
                                <div class="container"> <div class="row d-flex justify-content-center mt-5"> <div class="col-md-6"> <div id="myCarousel" class="carousel slide" data-ride="carousel" align="center"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://i.imgur.com/bV1xmG5.jpg" class="rounded"> </div> <div class="carousel-item"> <img src="https://i.imgur.com/vgMi4nw.jpg" class="rounded"> </div> <div class="carousel-item"> <img src="https://i.imgur.com/hRlGe10.jpg" class="rounded"> </div> </div> <ol class="carousel-indicators list-inline"> <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel"> <img src="https://i.imgur.com/bV1xmG5.jpg" class="img-fluid rounded"> </a> </li> <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel"> <img src="https://i.imgur.com/vgMi4nw.jpg" class="img-fluid rounded"> </a> </li> <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel"> <img src="https://i.imgur.com/hRlGe10.jpg" class="img-fluid rounded"> </a> </li> </ol> </div> </div> </div>
</div>
                                <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js'></script>
                            
                                </body>
                            </html>

11. By MasterofBeginning

Made by MasterofBeginning. A simple slider. Source

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="carousel">
            <div class="nav nav-left">
                <div class="ion-chevron-left carousel-arrow-icon-left"></div>
            </div>

            <div class="carousel-content"></div>

            <div class="nav nav-right">
                <div class="ion-chevron-right carousel-arrow-icon-right"></div>
            </div>
        </div>
    <script src="index.js"></script>
</body>

</html>


---------CSS-----------



*,
*:before,
*:after {
  box-sizing: border-box;
}

.carousel {
  position: relative;
  width: 60%;
  height: 140px;
  margin: 20% auto;
}

.carousel-content {
  position: relative;
  overflow: hidden;
  transition: width 0.4s;
  height: 100%;
}

.slide {
  display: flex;
  flex-direction: column;
  height: inherit;
  text-align: center;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  z-index: 1;
  transition: left 0.4s cubic-bezier(0.47, 0.13, 0.15, 0.89);
  padding: 1em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
  color: rgba();
  backface-visibility: hidden;
}

img {
  max-width: 80%;
  max-height: 80%;
}

.nav {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  background-color: rgba(150, 150, 150, 0.3);
  width: 20px;
  height: 20px;
  z-index: 2;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  outline: none;
  color: white;
  user-select: none;
}

.nav-left {
  left: -25px;
}

.nav-right {
  right: -25px;
}

.carousel-arrow-icon-left {
  margin-left: 5px;
  margin-top: 2px;
}

.carousel-arrow-icon-right {
  margin-left: 7px;
  margin-top: 2px;
}




---------JS-----------


const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

var carousel = $(".carousel"),
  carouselContent = $(".carousel-content");

var leftNav = $(".nav-left"),
  rightNav = $(".nav-right");

// var array = ["dog", "cat", "bird", "seal", "otter", "hamster"];
var array = {
  dog: "https://i.pinimg.com/originals/2d/24/a3/2d24a321e96701884af5d84ab8fa69b3.jpg",
  cat: "https://i.pinimg.com/originals/d6/bf/1b/d6bf1b941dfe9d7e5905cabff18a2a97.jpg",
  bird: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbhTM7uC6UbYkFGX27FW9TR_JS0uaAKKhIrw&usqp=CAU",
  seal: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSHq_-hF3AOVkh6j4SPSkvJU7EiafrQO2sYw&usqp=CAU",
  otter:
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAq2-BRA8xlvoE8MBUTaXfJym9BwOqGjltOQ&usqp=CAU",
  hamster:
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-FjnQV_M9cr2R9wI8lxyn6rLusmv_p-kh2g&usqp=CAU",
};

var arrKey = Object.keys(array);
var arrValue = Object.values(array);

var moving = true;
var slideWidth;
var carouselDisplaying;
var screenSize;

window.onload = function () {
  setScreenSize();
  Initial();
  let loop = 0;
  let timeOut = 0;
  
//reset function is to make an 
//interval automatically run the slide
//if there is no click on the left and right buttons
//of the carousel during a time out 
  const reset = (check = "running") => {
    if (check == "stop") {
      clearTimeout(timeOut);
      clearInterval(loop);
      var value = 2;
    } else {
      var value = 0;
    }
    timeOut = setTimeout(() => {
      loop = setInterval(function () {
        RightBut();
      }, 2 * 1000);
    }, value * 1000);
  };

  reset();
  leftNav.onclick = function () {
    if (moving == true) {
      moving = false;
      LeftBut();
    }
    reset("stop");
  };
  rightNav.onclick = function () {
    if (moving == true) {
      moving = false;
      RightBut();
    }
    reset("stop");
  };
};

//RightBut is to create slide
//in the right of carousel
function RightBut() {
  let lastDiv = carouselContent.lastElementChild.innerText;
  let newSlide = CreateSlide(lastDiv, 1);
  carouselContent.appendChild(newSlide);
  newSlide.style.left = carouselContent.offsetWidth + "px";

  let initial = newSlide.offsetLeft;
  slideWidth = newSlide.offsetWidth;
  let slides = [...$$(".slide")];

  slides = slides.reverse();
  slides.forEach((slide) => {
    initial -= slideWidth;
    slide.style.left = initial + "px";
  });
  let firstDiv = carouselContent.firstElementChild;
  firstDiv.addEventListener("transitionend", () => {
    carouselContent.removeChild(firstDiv);
    moving = true;
  });
//   console.log(carouselContent)
}

//LeftBut is to create slide
//in the left of carousel
function LeftBut() {
  let firstDiv = carouselContent.firstElementChild.innerText;
  let newSlide = CreateSlide(firstDiv, -1);
  carouselContent.insertBefore(newSlide, carouselContent.firstElementChild);
  slideWidth = newSlide.offsetWidth;
  newSlide.style.left = -2 * slideWidth + "px";

  let initial = -slideWidth;
  let slides = Array.prototype.slice.call($$(".slide"));
  slides.forEach((slide) => {
    slide.style.left = initial + "px";
    initial += slideWidth;
  });
  let lastDiv = carouselContent.lastElementChild;
  lastDiv.addEventListener("transitionend", function () {
    carouselContent.removeChild(lastDiv);
    moving = true;
  });
//   console.log(carouselContent)
}

//CreateSlide is to get value
//for the next slide going to be created
function CreateSlide(elem, val) {
  let index = arrKey.indexOf(elem);
  let value = (index + val) % arrKey.length;
  if (index == 0 && val == -1) {
    value = arrKey.length - 1;
  }
  let html = arrValue[value];
  let text = arrKey[value];
  return Logic(html, text);
}

//Logic is to create slide div
//with values get from CreateSlide 
function Logic(html, text) {
  let slide = document.createElement("div");
  slide.classList.add("slide"),
    (slide.innerHTML = `<img src="${html}"><p>${text}</p></img>`);
  slide.style.width = slideWidth + "px";
  return slide;
}

//Initial is to create the first slides
//in the carousel after project loaded
function Initial() {
  let initialPos = -slideWidth;
  for (let i = 0; i < 4; i++) {
    text = arrKey[i];
    html = arrValue[i];
    slide = Logic(html, text);
    carouselContent.appendChild(slide);
    slide.style.left = initialPos + "px";
    initialPos += slideWidth;
  }
}

window.addEventListener("resize", setScreenSize);

//setScreenSize change the number of slides
//displayed in carousel depending on window resize
function setScreenSize() {
  if (window.innerWidth >= 500) {
    carouselDisplaying = 3;
  } else if (window.innerWidth >= 300) {
    carouselDisplaying = 2;
  } else {
    carouselDisplaying = 1;
  }
  getScreenSize();
}

//getScreenSize adjust the size and number of slides
//depending on carousel size
function getScreenSize() {
  var slides = document.querySelectorAll(".slide");
  var slidesArray = Array.prototype.slice.call(slides);
  slideWidth = carousel.offsetWidth / carouselDisplaying;
  var initialWidth = -slideWidth;
  slidesArray.forEach(function (el) {
    el.style.width = slideWidth + "px";
    el.style.left = initialWidth + "px";
    initialWidth += slideWidth;
  });
}

12. By Ali Haider

Made by Ali Haider. Bootstrap sliders with multiple control methods. Source

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
    <!-- BootStrap Mininfid CSS Start -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">
    <!-- BootStrap Mininfid CSS Start -->

  <title>Carousel Slider by Bootstrap</title>
</head>

<body>
   <div class="container">
    <div class="row">
      <div class="col-sm-8 m-auto">

        <!-- SIMPLE SLIDER -->
        <h1 class="text-center mt-3">This is a Simple Slider</h1>
        <br>
        <div class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>
        </div>


        <br>
        <br>
        <hr>
        <!-- SLIDER WITH CONTROLS -->
        <h1 class="text-center">This is a Slider With Control Button</h1>
        <br>

        <div id="slider2" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>

          <!-- Controls -->

          <a href="#slider2" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a href="#slider2" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>

        <br>
        <br>
        <hr>

        <!-- SLIDER WITH INDICATORS -->
        <h1 class="text-center">This is a Slider With Control Button & Indicators</h1>
        <br>

        <div id="slider3" class="carousel slide" data-ride="carousel">
        
        <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#slider3" data-slide-to="0"></li>
            <li class="active" data-target="#slider3" data-slide-to="1"></li>
            <li data-target="#slider3" data-slide-to="2"></li>
          </ol>
        <!-- Indicators End -->
        
          <div class="carousel-inner">
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>
          <!-- Controls for Slider -->
          <a href="#slider3" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a href="#slider3" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
          <!-- Controls for Slider End -->
        </div>
        <br>
        <hr>

        <!-- SLIDER WITH CAPTIONS -->
        <br>
        <h1 class="text-center">This is a Slider With  Title & Captions</h1>

        <br>
        <br>

        <div id="ali" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li class="active" data-target="#ali" data-slide-to="0"></li>
            <li data-target="#ali" data-slide-to="1"></li>
            <li data-target="#ali" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="slider" class="d-block img-fluid">
              <div class="carousel-caption">
                <h3 class="text-uppercase">Don't Forget to</h3>
                <p class="lead">Follow Me</p>
              </div>
          </div>
            <div class="carousel-item">
              <img src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="slider" class="d-block img-fluid">
              <div class="carousel-caption">
                <h3 class="text-uppercase">Don't Forget To </h3>
                <p class="lead">Like and Comment</p>
              </div>
          </div>
            <div class="carousel-item">
              <img src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="slider" class="d-block img-fluid">
              <div class="carousel-caption">
                <h3 class="text-uppercase">Don't Forget to</h3>
                <p class="lead">Comments</p>
              </div>
          </div>
          </div>
          <!-- Controls -->
          <a href="#ali" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a href="#ali" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>

      </div>
    </div>
  </div>

  <div style="margin-top:300px;"></div>
 
 
 <!-- Optiona JS File -->
 <!-- First jQuary then Bootstrap JS -->
 
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
    crossorigin="anonymous"></script>
</body>

</html>

13. By Javier Castillo

Made by Javier Castillo. Avengers themed slider. Source

  <html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="https://images.fandango.com/ImageRenderer/0/0/redesign/static/img/default_poster.png/0/images/masterrepository/other/INTRO_AvengersAgeUltron_FINAL.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://images.fandango.com/ImageRenderer/0/0/redesign/static/img/default_poster.png/0/images/masterrepository/other/INTRO_AvengersAgeUltron_FINAL.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://images.fandango.com/ImageRenderer/0/0/redesign/static/img/default_poster.png/0/images/masterrepository/other/INTRO_AvengersAgeUltron_FINAL.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </body>
</html>

14. By Anirudha Bhowmik

Made by Anirudha Bhowmik. Zoom image slider. Source

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->


<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/alexnoz/pen/brazWd?depth=everything&limit=all&order=popularity&page=12&q=slider&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Lora:700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
:root {
  --z-distance: 8.519vw;
  --from-left: 1;
  --mobile-bkp: 650px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Lora, serif;
  font-size: calc(14px + .3vw);
}

.slider {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.slider::before, .slider::after {
  content: '';
  left: -1vw;
  top: -1vh;
  display: block;
  position: absolute;
  width: 102vw;
  height: 102vh;
  background-position: center;
  background-size: cover;
  will-change: opacity;
  z-index: -1;
  box-shadow: 0 0 0 50vmax rgba(0, 0, 0, 0.7) inset;
}
.slider::before {
  background-image: var(--img-prev);
}
.slider::after {
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
  opacity: 0;
  background-image: var(--img-next);
}
.slider--bg-next::after {
  opacity: 1;
}
.slider__content {
  margin: auto;
  width: 65vw;
  height: 32.5vw;
  max-height: 60vh;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  pointer-events: none;
  -webkit-transform: translateZ(var(--z-distance));
          transform: translateZ(var(--z-distance));
}
.slider__images {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  box-shadow: 0 0 5em #000;
}
.slider__images-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  will-change: transform;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  visibility: hidden;
}
.slider__images-item img {
  display: block;
  position: relative;
  left: -1em;
  top: -1em;
  width: calc(100% + 1em * 2);
  height: calc(100% + 1em * 2);
  -o-object-fit: cover;
     object-fit: cover;
  will-change: transform;
}
.slider__images-item--active {
  z-index: 20;
  visibility: visible;
}
.slider__images-item--subactive {
  z-index: 15;
  visibility: visible;
}
.slider__images-item--next {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.slider__images-item--prev {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.slider__images-item--transit {
  -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
  transition: opacity 0.7s, -webkit-transform 0.7s;
  transition: transform 0.7s, opacity 0.7s;
  transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
}
.slider__text {
  position: relative;
  height: 100%;
}
.slider__text-item {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0.5em;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.slider__text-item > * {
  overflow: hidden;
  position: absolute;
}
.slider__text-item h3, .slider__text-item p {
  -webkit-transition: -webkit-transform 0.35s ease-out;
  transition: -webkit-transform 0.35s ease-out;
  transition: transform 0.35s ease-out;
  transition: transform 0.35s ease-out, -webkit-transform 0.35s ease-out;
  line-height: 1.5;
  overflow: hidden;
}
.slider__text-item h3 {
  background-color: rgba(255, 255, 255, 0.5);
}
.slider__text-item p {
  font-family: 'Open Sans', sans-serif;
  padding: 1em;
  color: white;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.slider__text-item h3::before, .slider__text-item p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.35s ease-out 0.28s;
  transition: -webkit-transform 0.35s ease-out 0.28s;
  transition: transform 0.35s ease-out 0.28s;
  transition: transform 0.35s ease-out 0.28s, -webkit-transform 0.35s ease-out 0.28s;
}
.slider__text-item h3::before {
  background-color: #000;
}
.slider__text-item p::before {
  background-color: #fff;
}
.slider__text-item h3 {
  margin: 0;
  font-size: 3.5em;
  padding: 0 .3em;
  position: relative;
  font-weight: 700;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.slider__text-item p {
  margin: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.slider__text-item-head {
  top: -0.5em;
  -webkit-transform: translateZ(3em);
          transform: translateZ(3em);
  -webkit-clip-path: polygon(0 0, 0.5em 100%, 100% 100%, calc(100% - .3em) 0.3em);
          clip-path: polygon(0 0, 0.5em 100%, 100% 100%, calc(100% - .3em) 0.3em);
}
.slider__text-item-info {
  bottom: 0;
  right: 0;
  max-width: 75%;
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
  -webkit-transform: translateZ(2em);
          transform: translateZ(2em);
  -webkit-clip-path: polygon(0.5em 0, 100% 0%, calc(100% - .5em) 100%, 0 calc(100% - .5em));
          clip-path: polygon(0.5em 0, 100% 0%, calc(100% - .5em) 100%, 0 calc(100% - .5em));
}
.slider__text-item--active h3, .slider__text-item--active p {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.slider__text-item--active h3::before {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.slider__text-item--active p::before {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.slider__text-item--backwards h3::before, .slider__text-item--backwards p::before {
  -webkit-transition: -webkit-transform 0.35s ease-in;
  transition: -webkit-transform 0.35s ease-in;
  transition: transform 0.35s ease-in;
  transition: transform 0.35s ease-in, -webkit-transform 0.35s ease-in;
}
.slider__text-item--backwards h3, .slider__text-item--backwards p {
  -webkit-transition: -webkit-transform 0.35s ease-in 0.35s;
  transition: -webkit-transform 0.35s ease-in 0.35s;
  transition: transform 0.35s ease-in 0.35s;
  transition: transform 0.35s ease-in 0.35s, -webkit-transform 0.35s ease-in 0.35s;
}
.slider__nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.slider__nav-arrows {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.slider__nav-arrow {
  height: 100vh;
  width: 50vw;
  text-indent: -9999px;
  white-space: nowrap;
}
.slider__nav-arrow--left {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='3 1 1 2 3 3' stroke='white' stroke-width='.3' stroke-opacity='.5' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
  cursor: var(--arrow) 40 40, auto;
}
.slider__nav-arrow--right {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='1 1 3 2 1 3' stroke='white' stroke-width='.3' stroke-opacity='.5' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
  cursor: var(--arrow) 40 40, auto;
}
.slider__nav-dots {
  margin-top: 88vh;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  padding: 1em;
  pointer-events: none;
}
.slider__nav-dots::before {
  content: '';
  position: absolute;
  left: calc(1em + 1em + 2px);
  top: calc(1em + 2px);
  width: calc(1em - 2px * 2);
  height: calc(1em / 2 - 2px * 2);
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-transition: -webkit-transform 0.7s ease-out;
  transition: -webkit-transform 0.7s ease-out;
  transition: transform 0.7s ease-out;
  transition: transform 0.7s ease-out, -webkit-transform 0.7s ease-out;
  -webkit-transform: translateX(calc((1em + 1em * 2) * (var(--from-left) - 1)));
          transform: translateX(calc((1em + 1em * 2) * (var(--from-left) - 1)));
}
.slider__nav-dot {
  margin: 0 1em;
  width: 1em;
  height: 0.5em;
  border: 2px solid rgba(255, 255, 255, 0.5);
  /* 
    The cursor is not the default one because of a weird bug 
    related to custom cursors above
  */
  cursor: crosshair;
  pointer-events: all;
  display: inline-block;
}
.slider__nav-dot:hover {
  border-color: rgba(255, 255, 255, 0.7);
}
.slider__nav-dot:active {
  border-color: rgba(255, 255, 255, 0.5);
}

@media only screen and (max-width: 650px) {
  .slider::before,
  .slider::after {
    display: none;
  }

  .slider__content {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
  }

  .slider__text-item-info {
    bottom: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, 50%);
            transform: translate(-50%, 50%);
  }
  .slider__text-item-info p {
    padding: 1em .8em;
  }

  .slider__text-item-head {
    top: 5vh;
    left: 10vw;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  .slider__text-item-head h3 {
    font-size: 2.5em;
  }

  .slider__nav-dots {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .slider__nav-arrow {
    width: 10vw;
    position: relative;
    cursor: auto;
  }
  .slider__nav-arrow:active {
    -webkit-filter: brightness(0.5);
            filter: brightness(0.5);
  }
  .slider__nav-arrow::before {
    content: '';
    background-image: var(--arrow);
    background-size: cover;
    width: 8vw;
    height: 8vw;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .slider__nav-arrow--left {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.7) 0, transparent 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0, transparent 100%);
  }
  .slider__nav-arrow--left:active {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.9) 0, transparent 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0, transparent 100%);
  }
  .slider__nav-arrow--right {
    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.7) 0, transparent 100%);
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.7) 0, transparent 100%);
  }
  .slider__nav-arrow--right:active {
    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.9) 0, transparent 100%);
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9) 0, transparent 100%);
  }
}
</style></head><body>

<div class="slider" id="slider" style="--img-prev:url(https://lh3.googleusercontent.com/aC9nyW5dhaYFmWD8fcf8DApjpH08eHEkbCHqmUPHRQ5T3jK-QyNKZYVMehmrvyPdEA_KxWvgZ3_kyOOYOAv99Ow3UoKSvEloleVKGSfLOwOyDV3Q6Dwi1G-NYoa9-t_ofmmskE6BYnVIOnIz2HWlMcijzIEwvKAL_R4z63DaLgG0z_OcGiSQHunwGAPXrBQUv42ZXuIMODq4zxDHczSxJ72b0-_udtdQK3JuT2X8nXCwFoF7GxmOpzXS0H5f50DuCbXoXcx-O7bgBMCXZdMpTxB27-wdXeLmxpYUySXgjSN2NAKmK16DmGLYvw5tMlrqwb8h4MJEEbXjP1pjPxXsahb7UZseEGyn80uLjATANJvusyJWCtzkkxYXPz-yI1rDvfEJKe2eyA-5AvFlzFBSwBMASn8f7mXinUrXMMREkJQjoi89NfZ91G7253OEVQOqcWxddiYtcHCO5v6Pl3QfV2SUTWXgggscDSY2ezjSPpYERNTXnIM_aCyWmIG7ybrfqOB0eVYBAgynyuPVbjd4KuZWZq2Dfu33HX1RuPKglbOuZGD1QbpJnruvUVkAmjDXI40ENN7X=w1600-h766)"> 
  <div class="slider__content" id="slider-content">
    <div class="slider__images">
      <div class="slider__images-item slider__images-item--active" data-id="1"><img src="https://lh3.googleusercontent.com/aC9nyW5dhaYFmWD8fcf8DApjpH08eHEkbCHqmUPHRQ5T3jK-QyNKZYVMehmrvyPdEA_KxWvgZ3_kyOOYOAv99Ow3UoKSvEloleVKGSfLOwOyDV3Q6Dwi1G-NYoa9-t_ofmmskE6BYnVIOnIz2HWlMcijzIEwvKAL_R4z63DaLgG0z_OcGiSQHunwGAPXrBQUv42ZXuIMODq4zxDHczSxJ72b0-_udtdQK3JuT2X8nXCwFoF7GxmOpzXS0H5f50DuCbXoXcx-O7bgBMCXZdMpTxB27-wdXeLmxpYUySXgjSN2NAKmK16DmGLYvw5tMlrqwb8h4MJEEbXjP1pjPxXsahb7UZseEGyn80uLjATANJvusyJWCtzkkxYXPz-yI1rDvfEJKe2eyA-5AvFlzFBSwBMASn8f7mXinUrXMMREkJQjoi89NfZ91G7253OEVQOqcWxddiYtcHCO5v6Pl3QfV2SUTWXgggscDSY2ezjSPpYERNTXnIM_aCyWmIG7ybrfqOB0eVYBAgynyuPVbjd4KuZWZq2Dfu33HX1RuPKglbOuZGD1QbpJnruvUVkAmjDXI40ENN7X=w1600-h766"/></div>
      <div class="slider__images-item" data-id="2"><img src="https://lh3.googleusercontent.com/4Bn4zdADhWhegRcmxS1xmHxbxIBzEgB8ADfeaCmiwT9iF7y2mN9Wc5L7gFLxUo2bgl3V-97EFrOyE9OXfkvip3pkpNxYe50GiapeT41p7D7tNJm3oEdV8Y-7toGyvz0UZ8VgDACVTUEdzzVVm2NtQSCroSvmo4gL3u0ty-KAyKnah9vIitfw2Rs1MuNzQq6vmzUcw1_4obGAKmk_Nx0dD33RSy1jbT8D61kxERbOu0pHUciywIO2EeUX8iOcJfHHQwVW3lGYcZKSiimGjBUvzHILrSpVZQ1xUlj0U21EeY4Hil1ZaJQaX47hQezcxZj7H8GyWhNv2TzQ7EU8DS3_MonCLxXlnXfk-80nncPa8DxN_UlIzJeOPDiWPSLXFaDJn_ywCutx-0onw5rcSC815_krGHXKt3L_weD5pq_e_2WI3BRZndcR2jOYLz9BiUp52ouDBIDw2OzrDtUgxne9NaQ2tOJwaIR26N1un92ChTLhXZF2F2NoS3Do96TY6A5dP6RsXQzK6G0Z6oj5XtYx-p--PrdP8wiDPAzOqXQkXbJaX8l2qPi3nTYrD8rB-eKyL2E1q9xQ=w1600-h766"/></div>
      <div class="slider__images-item" data-id="3"><img src="https://lh3.googleusercontent.com/r29_BOXT9GjEA49-KbPtzHtTxD16dilHpFROmoJyZdQbvCelXqgG8bcApe8OgIY-avTrFOUWO-lDsmI-muMIgRVc5IFHCIyrOR18DrnwTLh70aSNY6cTY0bNbyt4QCXBlj9R4fmA8PJMRYkTA-nB5zSvlZii9NnP9kG8w__DUrYfo9IbOZAxGY_DsheGuHA0CSWLB-lQwvHo7_sSNabsiZJ2C_878r7uEfaIR6XkjcyrWMKi529UtPl9Ikln3cXphy9HrzElIL6200dGL9GHiMMoASseLp_Z950xjT2smzTrOJSADFCG9EmScicKDbFTYZH6gyc2DEP0mUFRArhTSPa4TIUwLy9KR8bG7kV-ljmSPKv4pbtH4ByXgQ5DEm5ydOkR-DTkYkLBkcFL8cjiBPPuUdK3xkjoOciwjglMF5xAXhpnTj0VUnk3RWc9YDD-AQI2uvDatV_Ae0zzLQUIm2gfV3QiDXdkkzeLWsRmCXrr0bFf42s_1NrWD0GLfrTtHNqzBCfYbAWtjeBxHfMxlESqJLAvGketLMscx5PndptC0MRhGZESjWdRUE3kNxg7PA9EhTZg=w1600-h766"/></div>
      <div class="slider__images-item" data-id="4"><img src="https://lh3.googleusercontent.com/7MsdX710gvwl8YRxuiPIlIbGP8d3ypDASWqIOad9SpHHAPwMATjCoftyvoHjpy9eeD8aJVxVup-Zb02QMeBSFOXyqOlVc8ib3TVIXtktozy6sJK07H8Jo8UlJSpYcfgUq83Z5rJOiGQQAaZPhRYUcCR0aenU8Eh8aTuqvttfZA-PjsU39q5_I1HcpWDF1mXIxJTmlGqsoQNIuL75GDE-I2im2tAjEk6bkJkJEbDntxB5cLJEfV8TuKRsQwenkiN5opF4ttHGXYtJlS7adu-IO4wVIFcEOzdx4c1Eri3O6f9qjsTpXQH3BmpkTaLAtL5xzJit9qa0a4Dp-aZOZp1QzWeB6-dLM5HRxSiPFkku3S1umwm_GBeY3glxd3Ftata1mFIxpis6gR76oTiNO33vjxn1UZXYhCQUDByGyyuE6WOoPtu9iXJxfmUF9UMXiXVl7qyH-U7NJmq18qcU0Q6U7H3VucD_d2Vg8WTZmqVq7aA4jQ7MLuQASgMZIerxgwV_aW98z7xsS8isHgF9rN4Qtez18OjyabQxRXlC6shvRTqTDCpt1MPlfBWwyR2BKO3dHzk7h8T5=w1600-h766"/></div>
      <div class="slider__images-item" data-id="5"><img src="https://lh3.googleusercontent.com/lqd5x1eNHsfzWpPeHNPe4u-ycQh1LyxWLp_mXi8tLvQGh4aNCbANfSfSWQdqhQy7c2J2V3a4dGIw6tRcMJCpFvsRrLLpXcFgHIjWpCWoxtgWC--0tMjb6W-YYKJX55zIhS1omxmSGPuQx1sZtsAL-XnRiqXbEIjGX1A_vbDObqVEc8TP3nVsraN5xLtektJbccNriwqqZ2CqpiuHagXKCRt3oa7D8N2ZygR-i04o8YP2pHr6I0Z76R6lZj1HDY65Sj-mkPJpN6nWKY-V_6htmMndJRY615MHntdsfZ82k5_IBbJXxdIN5MjJvgk41eyFXxzTKIXSGms-itEbW7FqMlZT8bIAigDoXYub9rh-FjtfdmVRVdwIIngzFzJrJQBroyHPxW9kW2JjH8foZCzX5YMStsHvfm1s4uAhZtbwK4KI_-x9GuXI3-cCUmtuFdQ-E2z_l3Hom57dasvYj6tFcqhRS9X_popdYTxR-4IeSE-NAjp71LDevvejtAqQTvpIRMFhV9um8qOb-xkPRe0xSoR6-chA2cQE--cbFJiLxe6ywBIqW6lI-aSI9Kv924s-OfRUGz0u=w1600-h766"/></div>
    </div>
    <div class="slider__text">
      <div class="slider__text-item slider__text-item--active" data-id="1">
        <div class="slider__text-item-head">
          <h3>Forest</h3>
        </div>
        <div class="slider__text-item-info">
          <p>โ€œAnd into the forest I go, to lose my mind and find my soulโ€</p>
        </div>
      </div>
      <div class="slider__text-item" data-id="2">
        <div class="slider__text-item-head">
          <h3>Lake</h3>
        </div>
        <div class="slider__text-item-info">
          <p>โ€œMist to mist, drops to drops. For water thou art, and unto water shalt thou returnโ€</p>
        </div>
      </div>
      <div class="slider__text-item" data-id="3">
        <div class="slider__text-item-head">
          <h3>Cliffs</h3>
        </div>
        <div class="slider__text-item-info">
          <p>โ€œGo to the edge of the cliff and jump off. Build your wings on the way downโ€</p>
        </div>
      </div>
      <div class="slider__text-item" data-id="4">
        <div class="slider__text-item-head">
          <h3>Mountains</h3>
        </div>
        <div class="slider__text-item-info">
          <p>โ€œWhat are men to rocks and mountains?โ€</p>
        </div>
      </div>
      <div class="slider__text-item" data-id="5">
        <div class="slider__text-item-head">
          <h3>Peaks</h3>
        </div>
        <div class="slider__text-item-info">
          <p>โ€œOn all the peaks lies peaceโ€</p>
        </div>
      </div>
    </div>
  </div>
  <div class="slider__nav">
    <div class="slider__nav-arrows">
      <div class="slider__nav-arrow slider__nav-arrow--left" id="left">to left</div>
      <div class="slider__nav-arrow slider__nav-arrow--right" id="right">to right</div>
    </div>
    <div class="slider__nav-dots" id="slider-dots">
      <div class="slider__nav-dot slider__nav-dot--active" data-id="1"></div>
      <div class="slider__nav-dot" data-id="2"></div>
      <div class="slider__nav-dot" data-id="3"></div>
      <div class="slider__nav-dot" data-id="4"></div>
      <div class="slider__nav-dot" data-id="5"></div>
    </div>
  </div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/*
  More about this function - 
  https://codepen.io/rachsmith/post/animation-tip-lerp
*/
function lerp(_ref, _ref2) {
  var x = _ref.x;
  var y = _ref.y;
  var targetX = _ref2.x;
  var targetY = _ref2.y;

  var fraction = 0.2;

  x += (targetX - x) * fraction;
  y += (targetY - y) * fraction;

  return { x: x, y: y };
}

var Slider = function () {
  function Slider(el) {
    _classCallCheck(this, Slider);

    var imgClass = this.IMG_CLASS = 'slider__images-item';
    var textClass = this.TEXT_CLASS = 'slider__text-item';
    var activeImgClass = this.ACTIVE_IMG_CLASS = imgClass + '--active';
    var activeTextClass = this.ACTIVE_TEXT_CLASS = textClass + '--active';

    this.el = el;
    this.contentEl = document.getElementById('slider-content');
    this.onMouseMove = this.onMouseMove.bind(this);

    // taking advantage of the live nature of 'getElement...' methods
    this.activeImg = el.getElementsByClassName(activeImgClass);
    this.activeText = el.getElementsByClassName(activeTextClass);
    this.images = el.getElementsByTagName('img');

    document.getElementById('slider-dots').addEventListener('click', this.onDotClick.bind(this));

    document.getElementById('left').addEventListener('click', this.prev.bind(this));

    document.getElementById('right').addEventListener('click', this.next.bind(this));

    window.addEventListener('resize', this.onResize.bind(this));

    this.onResize();

    this.length = this.images.length;
    this.lastX = this.lastY = this.targetX = this.targetY = 0;
  }

  Slider.prototype.onResize = function onResize() {
    var htmlStyles = getComputedStyle(document.documentElement);
    var mobileBreakpoint = htmlStyles.getPropertyValue('--mobile-bkp');

    var isMobile = this.isMobile = matchMedia('only screen and (max-width: ' + mobileBreakpoint + ')').matches;

    this.halfWidth = innerWidth / 2;
    this.halfHeight = innerHeight / 2;
    this.zDistance = htmlStyles.getPropertyValue('--z-distance');

    if (!isMobile && !this.mouseWatched) {
      this.mouseWatched = true;
      this.el.addEventListener('mousemove', this.onMouseMove);
      this.el.style.setProperty('--img-prev', 'url(' + this.images[+this.activeImg[0].dataset.id - 1].src + ')');
      this.contentEl.style.setProperty('transform', 'translateZ(' + this.zDistance + ')');
    } else if (isMobile && this.mouseWatched) {
      this.mouseWatched = false;
      this.el.removeEventListener('mousemove', this.onMouseMove);
      this.contentEl.style.setProperty('transform', 'none');
    }
  };

  Slider.prototype.getMouseCoefficients = function getMouseCoefficients() {
    var _ref3 = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

    var pageX = _ref3.pageX;
    var pageY = _ref3.pageY;

    var halfWidth = this.halfWidth;
    var halfHeight = this.halfHeight;
    var xCoeff = ((pageX || this.targetX) - halfWidth) / halfWidth;
    var yCoeff = (halfHeight - (pageY || this.targetY)) / halfHeight;

    return { xCoeff: xCoeff, yCoeff: yCoeff };
  };

  Slider.prototype.onMouseMove = function onMouseMove(_ref4) {
    var pageX = _ref4.pageX;
    var pageY = _ref4.pageY;

    this.targetX = pageX;
    this.targetY = pageY;

    if (!this.animationRunning) {
      this.animationRunning = true;
      this.runAnimation();
    }
  };

  Slider.prototype.runAnimation = function runAnimation() {
    if (this.animationStopped) {
      this.animationRunning = false;
      return;
    }

    var maxX = 10;
    var maxY = 10;

    var newPos = lerp({
      x: this.lastX,
      y: this.lastY
    }, {
      x: this.targetX,
      y: this.targetY
    });

    var _getMouseCoefficients = this.getMouseCoefficients({
      pageX: newPos.x,
      pageY: newPos.y
    });

    var xCoeff = _getMouseCoefficients.xCoeff;
    var yCoeff = _getMouseCoefficients.yCoeff;

    this.lastX = newPos.x;
    this.lastY = newPos.y;

    this.positionImage({ xCoeff: xCoeff, yCoeff: yCoeff });

    this.contentEl.style.setProperty('transform', '\n      translateZ(' + this.zDistance + ')\n      rotateX(' + maxY * yCoeff + 'deg)\n      rotateY(' + maxX * xCoeff + 'deg)\n    ');

    if (this.reachedFinalPoint) {
      this.animationRunning = false;
    } else {
      requestAnimationFrame(this.runAnimation.bind(this));
    }
  };

  Slider.prototype.positionImage = function positionImage(_ref5) {
    var xCoeff = _ref5.xCoeff;
    var yCoeff = _ref5.yCoeff;

    var maxImgOffset = 1;
    var currentImage = this.activeImg[0].children[0];

    currentImage.style.setProperty('transform', '\n      translateX(' + maxImgOffset * -xCoeff + 'em)\n      translateY(' + maxImgOffset * yCoeff + 'em)\n    ');
  };

  Slider.prototype.onDotClick = function onDotClick(_ref6) {
    var target = _ref6.target;

    if (this.inTransit) return;

    var dot = target.closest('.slider__nav-dot');

    if (!dot) return;

    var nextId = dot.dataset.id;
    var currentId = this.activeImg[0].dataset.id;

    if (currentId == nextId) return;

    this.startTransition(nextId);
  };

  Slider.prototype.transitionItem = function transitionItem(nextId) {
    var _this = this;

    function onImageTransitionEnd(e) {
      e.stopPropagation();

      nextImg.classList.remove(transitClass);

      self.inTransit = false;

      this.className = imgClass;
      this.removeEventListener('transitionend', onImageTransitionEnd);
    }

    var self = this;
    var el = this.el;
    var currentImg = this.activeImg[0];
    var currentId = currentImg.dataset.id;
    var imgClass = this.IMG_CLASS;
    var textClass = this.TEXT_CLASS;
    var activeImgClass = this.ACTIVE_IMG_CLASS;
    var activeTextClass = this.ACTIVE_TEXT_CLASS;
    var subActiveClass = imgClass + '--subactive';
    var transitClass = imgClass + '--transit';
    var nextImg = el.querySelector('.' + imgClass + '[data-id=\'' + nextId + '\']');
    var nextText = el.querySelector('.' + textClass + '[data-id=\'' + nextId + '\']');

    var outClass = '';
    var inClass = '';

    this.animationStopped = true;

    nextText.classList.add(activeTextClass);

    el.style.setProperty('--from-left', nextId);

    currentImg.classList.remove(activeImgClass);
    currentImg.classList.add(subActiveClass);

    if (currentId < nextId) {
      outClass = imgClass + '--next';
      inClass = imgClass + '--prev';
    } else {
      outClass = imgClass + '--prev';
      inClass = imgClass + '--next';
    }

    nextImg.classList.add(outClass);

    requestAnimationFrame(function () {
      nextImg.classList.add(transitClass, activeImgClass);
      nextImg.classList.remove(outClass);

      _this.animationStopped = false;
      _this.positionImage(_this.getMouseCoefficients());

      currentImg.classList.add(transitClass, inClass);
      currentImg.addEventListener('transitionend', onImageTransitionEnd);
    });

    if (!this.isMobile) this.switchBackgroundImage(nextId);
  };

  Slider.prototype.startTransition = function startTransition(nextId) {
    function onTextTransitionEnd(e) {
      if (!e.pseudoElement) {
        e.stopPropagation();

        requestAnimationFrame(function () {
          self.transitionItem(nextId);
        });

        this.removeEventListener('transitionend', onTextTransitionEnd);
      }
    }

    if (this.inTransit) return;

    var activeText = this.activeText[0];
    var backwardsClass = this.TEXT_CLASS + '--backwards';
    var self = this;

    this.inTransit = true;

    activeText.classList.add(backwardsClass);
    activeText.classList.remove(this.ACTIVE_TEXT_CLASS);
    activeText.addEventListener('transitionend', onTextTransitionEnd);

    requestAnimationFrame(function () {
      activeText.classList.remove(backwardsClass);
    });
  };

  Slider.prototype.next = function next() {
    if (this.inTransit) return;

    var nextId = +this.activeImg[0].dataset.id + 1;

    if (nextId > this.length) nextId = 1;

    this.startTransition(nextId);
  };

  Slider.prototype.prev = function prev() {
    if (this.inTransit) return;

    var nextId = +this.activeImg[0].dataset.id - 1;

    if (nextId < 1) nextId = this.length;

    this.startTransition(nextId);
  };

  Slider.prototype.switchBackgroundImage = function switchBackgroundImage(nextId) {
    function onBackgroundTransitionEnd(e) {
      if (e.target === this) {
        this.style.setProperty('--img-prev', imageUrl);
        this.classList.remove(bgClass);
        this.removeEventListener('transitionend', onBackgroundTransitionEnd);
      }
    }

    var bgClass = 'slider--bg-next';
    var el = this.el;
    var imageUrl = 'url(' + this.images[+nextId - 1].src + ')';

    el.style.setProperty('--img-next', imageUrl);
    el.addEventListener('transitionend', onBackgroundTransitionEnd);
    el.classList.add(bgClass);
  };

  _createClass(Slider, [{
    key: 'reachedFinalPoint',
    get: function get() {
      var lastX = ~ ~this.lastX;
      var lastY = ~ ~this.lastY;
      var targetX = this.targetX;
      var targetY = this.targetY;

      return (lastX == targetX || lastX - 1 == targetX || lastX + 1 == targetX) && (lastY == targetY || lastY - 1 == targetY || lastY + 1 == targetY);
    }
  }]);

  return Slider;
}();

var sliderEl = document.getElementById('slider');
var slider = new Slider(sliderEl);

// ------------------ Demo stuff ------------------------ //

var timer = 0;

function autoSlide() {
  requestAnimationFrame(function () {
    slider.next();
  });

  timer = setTimeout(autoSlide, 5000);
}

function stopAutoSlide() {
  clearTimeout(timer);

  this.removeEventListener('touchstart', stopAutoSlide);
  this.removeEventListener('mousemove', stopAutoSlide);
}

sliderEl.addEventListener('mousemove', stopAutoSlide);
sliderEl.addEventListener('touchstart', stopAutoSlide);

timer = setTimeout(autoSlide, 2000);
//# sourceURL=pen.js
</script>

<div class="container">
<div class="youtube">
    <h2>subscribe my youtube chanel for more knowledge</h2>
    https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vZpMOv_ggXs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

15. By William Workman

Made by William Workman. A simple Bootstrap slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<style>
{
	border: 1px dotted magenta;
}

body {
	background-color: #222;
	color: #fff;
}

.head {
	text-align: center;
}

.item {
	position: relative;
}

.carousel-inner img {
	width: 100%;
	psition: relative;
}

.carousel-caption {
	text-shadow: none;
}

.carousel-indicators {
	position: absolute;
	width: 100%;
	bottom: -25px;
  	transform: translate(-20%);
}

.carousel-indicators li, .carousel-indicators .active {
	margin: 0;
	border-radius: 0;
	width: 15%;
	height: 8px;
}
</style>
</head>

  <body>
	<div class="row">
	  	<div class="col-md-12 head">
			<div id="slider" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#slider" data-slide-to="0" class="active"></li>
					<li data-target="#slider" data-slide-to="1"></li>
					<li data-target="#slider" data-slide-to="2"></li>
					<li data-target="#slider" data-slide-to="3"></li>
					<li data-target="#slider" data-slide-to="4"></li>
				</ol>
				<!-- Slider Wrapper -->
				<div class="carousel-inner" role="listbox">
					<!-- Slide 1 -->
					<div class="item active">
						<div class="item-image">
							<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSBwR0Ivo8hH3B3UTqQd96Hq9cO0ZZq2SGOt8xhTbaVOtRx-ySB">
						</div>
						<div class="carousel-caption">
							<h1>Slide 1</h1>
							<p>Slide caption text goes here.</p>
						</div>
					</div>
					<!-- Slide 2 -->
					<div class="item">
						<div class="item-image">
							<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSBwR0Ivo8hH3B3UTqQd96Hq9cO0ZZq2SGOt8xhTbaVOtRx-ySB">
						</div>
						<div class="carousel-caption">
							<h1>Slide 2</h1>
							<p>Slide caption text goes here.</p>
						</div>
					</div>
					<!-- Slide 3 -->
					<div class="item">
						<div class="item-image">
							<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSBwR0Ivo8hH3B3UTqQd96Hq9cO0ZZq2SGOt8xhTbaVOtRx-ySB">
						</div>
						<div class="carousel-caption">
							<h1>Slide 3</h1>
							<p>Slide caption text goes here.</p>
						</div>
					</div>
					<!-- Slide 4 -->
					<div class="item">
						<div class="item-image">
							<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSBwR0Ivo8hH3B3UTqQd96Hq9cO0ZZq2SGOt8xhTbaVOtRx-ySB">
						</div>
						<div class="carousel-caption">
							<h1>Slide 4</h1>
							<p>Slide caption text goes here.</p>
						</div>
					</div>
					<!-- Slide 5 -->
					<div class="item">
						<div class="item-image">
							<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSBwR0Ivo8hH3B3UTqQd96Hq9cO0ZZq2SGOt8xhTbaVOtRx-ySB">
						</div>
						<div class="carousel-caption">
							<h1>Slide 5</h1>
							<p>Slide caption text goes here.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
  
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
  

</body>
</html>

16. By ASK Snb

Made by ASK Snb. A simple slider perfect for testimonials. Source

<!doctype html>
                        <html>
                            <head>
                                <meta charset='utf-8'>
                                <meta name='viewport' content='width=device-width, initial-scale=1'>
                                <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
                                <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                                <style>::-webkit-scrollbar {
                                  width: 8px;
                                }
                                /* Track */
                                ::-webkit-scrollbar-track {
                                  background: #f1f1f1; 
                                }
                                 
                                /* Handle */
                                ::-webkit-scrollbar-thumb {
                                  background: #888; 
                                }
                                
                                /* Handle on hover */
                                ::-webkit-scrollbar-thumb:hover {
                                  background: #555; 
                                }  body {
     background-color:#4A148C;
 }


 @media (max-width:991.98px) {
     .padding {
         padding: 1.5rem;
     }
 }

 @media (max-width:767.98px) {
     .padding {
         padding: 1rem;
     }
 }

 .padding {
     padding: 5rem;
 }

 .card {
    position: relative;
    display: flex;
    width: 350px;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #d2d2dc;
    border-radius: 11px;
    -webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
    -moz-box-shadow: 0px 0px 5px 0px rgba(212,182,212,1);
    box-shadow: 0px 0px 5px 0px rgb(161, 163, 164);
}

 .card .card-body {
        padding: 1rem 1rem;
 }

 .card-body {
     flex: 1 1 auto;
     padding: 1.25rem
 }

 p {
     font-size: 0.875rem;
     margin-bottom: .5rem;
     line-height: 1.5rem
 }

 h4{
         line-height: .2 !important;
 }
.profile{
           margin-top: 16px;
    margin-left: 11px;
}

.profile-pic{
     width: 58px;
}

.cust-name{
     font-size: 18px;
}

.cust-profession{
     font-size: 10px;
}



.items {
    width: 90%;
    margin: 0px auto;
    margin-top: 100px
}

.slick-slide {
    margin: 10px;
}




</style>
                                </head>
                                <body>
                                <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="items">
  
 <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><img src="https://img.icons8.com/ultraviolet/40/000000/quote-left.png"></h4>
                        
                        <div class="template-demo">
                            <p>Online reviews can make or break a customer's decision to make a purchase. Read about these customer review sites where your customers'</p>
                        </div>

                        <hr>

                        <div class="row">

                              <div class="col-sm-2">

                                    <img class="profile-pic" src="https://img.icons8.com/bubbles/100/000000/edit-user.png">
                                    
                              </div>

                              <div class="col-sm-10">
                                    
                                    <div class="profile">
                                      
                                      <h4 class="cust-name">Delbert Simonas</h4>
                                    <p class="cust-profession"
>Store Owner</p>    

                                    </div>
                                    
                                    
                              </div>
                              

                        </div>
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><img src="https://img.icons8.com/ultraviolet/40/000000/quote-left.png"></h4>
                        
                        <div class="template-demo">
                            <p>When you think of Apple you automatically think expensive if your anything like me. When purchasing this laptop I was skeptical on laptops i purchased.</p>
                        </div>

                        <hr>

                        <div class="row">

                              <div class="col-sm-2">

                                   <img class="profile-pic" src="https://img.icons8.com/bubbles/100/000000/edit-user.png">


                                    
                              </div>

                              <div class="col-sm-10">
                                    
                                    <div class="profile">
                                      
                                      <h4 class="cust-name">Tikoh Amin</h4>
                                    <p class="cust-profession
">Salon Owner</p>    

                                    </div>
                                    
                                    
                              </div>
                              

                        </div>
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><img src="https://img.icons8.com/ultraviolet/40/000000/quote-left.png"></h4>
                        
                        <div class="template-demo">
                            <p>Iโ€™ve wanted a MacBook for a while now because of the build quality and the simplicity of the OS. I spend an average 6 hours a day using it for college and the battery still has a fair.</p>
                        </div>

                        <hr>

                        <div class="row">

                              <div class="col-sm-2">

                                    <img class="profile-pic" src="https://img.icons8.com/bubbles/100/000000/edit-user.png">
                                    
                              </div>

                              <div class="col-sm-10">
                                    
                                    <div class="profile">
                                      
                                      <h4 class="cust-name">Malachi Lensing</h4>
                                    <p class="cust-profession
">Marketing Manager</p>    

                                    </div>
                                    
                                    
                              </div>
                              

                        </div>
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><img src="https://img.icons8.com/ultraviolet/40/000000/quote-left.png"></h4>
                        
                        <div class="template-demo">
                            <p>This MacBook has excellent processing speed. The screen is crystal clear and I really enjoy the touchbar. I set up the fingerprint reader.</p>
                        </div>

                        <hr>

                        <div class="row">

                              <div class="col-sm-2">

                                    <img class="profile-pic" src="https://img.icons8.com/bubbles/100/000000/edit-user.png">
                                    
                              </div>

                              <div class="col-sm-10">
                                    
                                    <div class="profile">
                                      
                                      <h4 class="cust-name">Christian Isla</h4>
                                    <p class="cust-profession
">Android Developer</p>    

                                    </div>
                                    
                                    
                              </div>
                              

                        </div>
                    </div>
                </div>


                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><img src="https://img.icons8.com/ultraviolet/40/000000/quote-left.png"></h4>
                        
                        <div class="template-demo">
                            <p>For the last 10 years, I have owned an old Gateway laptop. Although it was amazing and lasted me, it was time for an upgrade. I own an Apple phone so I decided to look into a computer.</p>
                        </div>

                        <hr>

                        <div class="row">

                              <div class="col-sm-2">

                                    <img class="profile-pic" src="https://img.icons8.com/bubbles/100/000000/edit-user.png">
                                    
                              </div>

                              <div class="col-sm-10">
                                    
                                    <div class="profile">
                                      
                                      <h4 class="cust-name">Lori Charles</h4>
                                    <p class="cust-profession
">Sales manager</p>    

                                    </div>
                                    
                                    
                              </div>
                              

                        </div>
                    </div>
                </div>



</div>
                                <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
                                <script type='text/javascript'>$(document).ready(function(){
    
    $('.items').slick({
  dots: true,
  infinite: true,
  speed: 800,
 autoplay: true,
 autoplaySpeed: 2000,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }

  ]
});
          });</script>
                                </body>
                            </html>

17. By aholics

Made by aholics. Simple product display slider, clicking the product image changes the slider. Source

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
  
<style>
#myCarousel img {
  height: 50%;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#thumbSlider .carousel-inner {
  padding-left: 3rem;
  padding-right: 3rem;
}
#thumbSlider .carousel-inner .row {
  overflow: hidden;
}
#thumbSlider .carousel-inner .thumb:hover {
  cursor: pointer;
}
#thumbSlider .carousel-inner .thumb.active img {
  opacity: 1;
}
#thumbSlider .carousel-inner img {
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  opacity: 0.5;
}
#thumbSlider .carousel-inner img:hover {
  opacity: 1;
}
#thumbSlider .carousel-inner .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M5.25%200l-4%204%204%204%201.5-1.5-2.5-2.5%202.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
#thumbSlider .carousel-inner .carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M2.75%200l-1.5%201.5%202.5%202.5-2.5%202.5%201.5%201.5%204-4-4-4z'/%3E%3C/svg%3E");
}
</style>
</head>

<body>
  <!-- Main-Slideelement -->
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block" src="https://s14.postimg.cc/bnwpgsqnl/pixel1.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://s14.postimg.cc/k665l54w1/pixel2.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://s14.postimg.cc/4xg87dycx/pixel5.png" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://s14.postimg.cc/4kou178dd/pixel3.png" alt="Fourth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://s14.postimg.cc/almiy9n9t/pixel4.png" alt="Fifth slide">
    </div>
  </div>
</div>

<!-- Main-Slider-Element ends -->
<!-- Thumb-Slider-Element starts -->
<div id="thumbSlider" class="carousel slide" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row">
        <div data-target="#myCarousel" data-slide-to="0" class="thumb col-sm-4 active">
          <img src="https://s14.postimg.cc/z24osq8kt/pixel1.png" alt="XZ">
        </div>
        <div data-target="#myCarousel" data-slide-to="1" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/l8gc3onp9/pixel2.png" alt="XZ">
        </div>
        <div data-target="#myCarousel" data-slide-to="2" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/8ttk3djcd/pixel5.png" alt="XZ">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div data-target="#myCarousel" data-slide-to="3" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/4kou178d9/pixel3.png" alt="XZ">
        </div>
        <div data-target="#myCarousel" data-slide-to="4" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/almiy9n9t/pixel4.png" alt="XZ">
        </div>
        <div data-target="#myCarousel" data-slide-to="5" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/z24osq8kt/pixel1.png" alt="XZ">
        </div>
        
      </div>
    </div>
    <a class="carousel-control-prev" href="#thumbSlider" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#thumbSlider" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  
</div>
<!-- Thumb-Slider-Element ends -->
  <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
      <script id="rendered-js" >
$(document).ready(function () {
  // active thumbnail
  $("#thumbSlider .thumb").on("click", function () {
    $(this).addClass("active");
    $(this).siblings().removeClass("active");

  });
});
    </script>

</body>
</html>

18. By Omkar Bailkeri

Made by Omkar Bailkeri. Testimonial carousel slider with previous and next preview. Source

<!doctype html>
                        <html>
                            <head>
                                <meta charset='utf-8'>
                                <meta name='viewport' content='width=device-width, initial-scale=1'>
                                <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>
                                <style>::-webkit-scrollbar {
                                  width: 8px;
                                }
                                /* Track */
                                ::-webkit-scrollbar-track {
                                  background: #f1f1f1; 
                                }
                                 
                                /* Handle */
                                ::-webkit-scrollbar-thumb {
                                  background: #888; 
                                }
                                
                                /* Handle on hover */
                                ::-webkit-scrollbar-thumb:hover {
                                  background: #555; 
                                } 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>
                                <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>

<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">Marielle Haag</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 Vegara</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">John Paul</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">William Doe</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>
                                <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
                                <script type='text/javascript'>$(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>

19. By BBBootstrap Team

Made by BBBootstrap Team. Spinning Product Slider. Source

<!doctype html>
                        <html>
                            <head>
                                <meta charset='utf-8'>
                                <meta name='viewport' content='width=device-width, initial-scale=1'>
                                <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet'>
                                <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                                <style>::-webkit-scrollbar {
                                  width: 8px;
                                }
                                /* Track */
                                ::-webkit-scrollbar-track {
                                  background: #f1f1f1; 
                                }
                                 
                                /* Handle */
                                ::-webkit-scrollbar-thumb {
                                  background: #888; 
                                }
                                
                                /* Handle on hover */
                                ::-webkit-scrollbar-thumb:hover {
                                  background: #555; 
                                } .mt-50{margin-top:100px}.sliderimage{width: 100%;height: 100%}#css3dimagePager, #css3dtransparency{text-align: center;position: relative;z-index: 11;padding: 0 0 10px;margin: 0}#css3dimagePager li{padding-right: 2em;display: inline-block;cursor: pointer}#css3dimagePager li.active, #css3dtransparency.active{font-weight: bold}#css3dimageslider{-webkit-perspective: 1000;-moz-perspective: 1000px;-ms-perspective: 1000;perspective: 1000;-webkit-perspective-origin: 50% 100px;-moz-perspective-origin: 50% 100px;-ms-perspective-origin: 50% 100px;perspective-origin: 50% 100px;margin: 40px auto 20px auto;width: 100%;height: 350px}#css3dimageslider ul{position: relative;margin: 0 auto;height: 281px;width: 450px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform-origin: 50% 100px 0;-moz-transform-origin: 50% 100px 0;-ms-transform-origin: 50% 100px 0;transform-origin: 50% 100px 0;-webkit-transition: all 1.0s ease-in-out;-moz-transition: all 1.0s ease-in-out;-ms-transition: all 1.0s ease-in-out;transition: all 1.0s ease-in-out}#css3dimageslider ul li{position: absolute;height: 281px;width: 450px;padding: 0px}#css3dimageslider ul li:nth-child(1){-webkit-transform: translateZ(225px);-moz-transform: translateZ(225px);-ms-transform: translateZ(225px);transform: translateZ(225px)}#css3dimageslider ul li:nth-child(2){-webkit-transform: rotateY(90deg) translateZ(225px);-moz-transform: rotateY(90deg) translateZ(225px);-ms-transform: rotateY(90deg) translateZ(225px);transform: rotateY(90deg) translateZ(225px)}#css3dimageslider ul li:nth-child(3){-webkit-transform: rotateY(180deg) translateZ(225px);-moz-transform: rotateY(180deg) translateZ(225px);-ms-transform: rotateY(180deg) translateZ(225px);transform: rotateY(180deg) translateZ(225px)}#css3dimageslider ul li:nth-child(4){-webkit-transform: rotateY(-90deg) translateZ(225px);-moz-transform: rotateY(-90deg) translateZ(225px);-ms-transform: rotateY(-90deg) translateZ(225px);transform: rotateY(-90deg) translateZ(225px)}</style>
                                </head>
                                <body>
                                <div class="mt-50">
    <div id="css3dimageslider" class="transparency">
        <ul>
            <li> <img class="sliderimage" src="https://i.imgur.com/QwIYa8y.jpg"> </li>
            <li> <img class="sliderimage" src="https://i.imgur.com/QwIYa8y.jpg"> </li>
            <li> <img class="sliderimage" src="https://i.imgur.com/IglVN9o.jpg"> </li>
            <li> <img class="sliderimage" src="https://i.imgur.com/QwIYa8y.jpg"> </li>
        </ul>
    </div>
    <ul id="css3dimagePager">
        <li class="list-group-item list-group-item-danger">HP Spectre x360</li>
        <li class="list-group-item list-group-item-danger"> HP Chromebook 14</li>
        <li class="list-group-item list-group-item-danger">HP Omen X</li>
        <li class="list-group-item list-group-item-danger"> HP Spectre Folio</li>
    </ul>
</div>
                                <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
                                <script type='text/javascript'>$(document).ready(function() {
 	$("#css3dimagePager li").click(function(){
		var rotateY = ($(this).index() * -90); 
		$("#css3dimageslider ul").css({"-webkit-transform":"rotateY("+rotateY+"deg)", "-moz-transform":"rotateY("+rotateY+"deg)", "-ms-transform":"rotateY("+rotateY+"deg)", "transform":"rotateY("+rotateY+"deg)"});
		$("#css3dimagePager li").removeClass("active");
		$(this).addClass("active");
	});
 	$("#css3dtransparency").click(function() {
		$("#css3dimageslider").toggleClass("transparency");
		$(this).toggleClass("active");
	});
 });</script>
                            
                                </body>
                            </html>

20. By Manash

Made by Manash. Simple Bootstrap Slider. Source

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 4 Navbar with Slider</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Mouri</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://i.postimg.cc/bNQp0RDW/1.jpg" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Slider One Item</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.postimg.cc/pVzg3LWn/2.jpg" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Slider One Item</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.postimg.cc/0y2F6Gpp/3.jpg" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Slider One Item</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>





<!--- ignore the code below-->

<div class="link-area">
  <a href="https://www.youtube.com/channel/UCki4IDK86E6_pDtptmsslow" target="_blank">Click for More</a>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

	</body>
</html>


--------CSS--------


.carousel-item {
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.carousel-caption {
  bottom: 270px;
}

.carousel-caption h5 {
  font-size: 45px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 25px;
}

.carousel-caption p {
  width: 75%;
  margin: auto;
  font-size: 18px;
  line-height: 1.9;
}

.navbar-light .navbar-brand {
  color: #fff;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
}

.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
  color: #fff;
}

.navbar-light .navbar-nav .nav-link {
  color: #fff;
}

.navbar-toggler {
  background: #fff;
}

.navbar-nav {
  text-align: center;
}

.nav-link {
  padding: .2rem 1rem;
}

.nav-link.active,.nav-link:focus{
  color: #fff;
}

.navbar-toggler {
  padding: 1px 5px;
  font-size: 18px;
  line-height: 0.3;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: #fff;
}






/* ignore the code below */


.link-area
{
  position:fixed;
  bottom:20px;
  left:20px;  
  padding:15px;
  border-radius:40px;
  background:tomato;
}
.link-area a
{
  text-decoration:none;
  color:#fff;
  font-size:25px;
}

21. By Taha Halabi

Made by Taha Halabi. Very simple slider. Source

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - Bootstrap Slider</title>
  
  
  
  
<style>
body
{
    margin: 0;
    padding: 0;
}
.parent-card-carousel
{
    width: 600px;
    margin: 50px auto;
    height: 400px;
    position: relative;
    overflow: hidden;
}    
.parent-card-carousel .carouselbtn
{
    position: absolute;
    top: 170px;
    background: transparent;
    border: 0;
    color: white;
    font-size: 45px;
    outline: 0;
}
.parent-card-carousel  .carouselbtn:first-of-type
{
    left: 5px;
}
.parent-card-carousel  .carouselbtn:last-of-type
{
    right: 5px;
}
.card-carousel
{
    width: 100%;
    position: relative;
    height: 100%;
    transition: all 0.5s linear;
    right: 0;
}
.card-carousel div
{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #4e508d;
}
.activebtncarousel
{
    background: yellow;
}

.parent-card-carousel .points-carousel
{
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 10px;
}
.parent-card-carousel .points-carousel button
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    margin: 5px;
    outline: 0;
}
</style>


</head>

<body translate="no" >
  <!DOCTYPE html>
<html>
<head>
    <title>Slider Cards</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="parent-card-carousel" id="parentcardcarousel">
        <div class="card-carousel" id="card-carousel">
            <div class="cards">
                <img src="images/1.jpg">
            </div>
            <div class="cards">
                <img src="images/2.jpg">
            </div>
            <div class="cards">
                <img src="images/3.jpg">
            </div>
            <div class="cards">
                <img src="images/4.jpg">
            </div>
        </div>
        <button id="prev" class="carouselbtn">โฎ</button>
        <button id="next" class="carouselbtn">โฏ</button>
        <div class="points-carousel">
            <button class="btn-carousel"></button>
            <button class="btn-carousel"></button>
            <button class="btn-carousel"></button>
            <button class="btn-carousel"></button>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>
</html>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script id="rendered-js" >
var parentCardCarousel = document.getElementById("card-carousel"),
cardsCarousel = document.getElementsByClassName("cards"),
btnCarousel = document.getElementsByClassName("btn-carousel"),
btnCarousel1 = document.getElementById("next"),
btnCarousel2 = document.getElementById("prev"),
activeBtnCaousel,
orderBtnActiveCarousel,
orderBtnCarousel,
findOrderCarousel,
carouselWidth = 0,
carouselWidth2 = 0,
cardsWidth = 0,
cardsOrder = 0;

for (let i = 1; i < cardsCarousel.length; i = i + 1) {if (window.CP.shouldStopExecution(0)) break;

  cardsWidth = cardsWidth + cardsCarousel[i].offsetWidth;
  cardsCarousel[i].style.left = cardsWidth + "px";
}window.CP.exitedLoop(0);

btnCarousel[cardsOrder].classList.add("activebtncarousel");

for (let i = 0; i < btnCarousel.length; i = i + 1) {if (window.CP.shouldStopExecution(1)) break;

  btnCarousel[i].setAttribute("data-order", i);

  btnCarousel[i].onclick = function () {

    activeBtnCaousel = document.querySelector(".activebtncarousel");
    orderBtnActiveCarousel = parseInt(activeBtnCaousel.getAttribute("data-order"));

    activeBtnCaousel.classList.remove("activebtncarousel");

    orderBtnCarousel = parseInt(this.getAttribute("data-order"));

    cardsOrder = orderBtnCarousel;

    this.classList.add("activebtncarousel");

    if (orderBtnActiveCarousel < orderBtnCarousel) {

      //parentCardCarousel.style.transition = "all 0.5s linear";

      findOrderCarousel = orderBtnCarousel - orderBtnActiveCarousel;

      carouselWidth += cardsCarousel[0].offsetWidth * findOrderCarousel;

      parentCardCarousel.style.right = carouselWidth + "px";

    } else if (orderBtnActiveCarousel > orderBtnCarousel) {

      parentCardCarousel.style.transition = "all 0.5s linear";

      findOrderCarousel = orderBtnActiveCarousel - orderBtnCarousel;

      carouselWidth -= cardsCarousel[0].offsetWidth * findOrderCarousel;

      parentCardCarousel.style.right = carouselWidth + "px";

    }

  };

}window.CP.exitedLoop(1);

btnCarousel1.onclick = function () {

  activeBtnCaousel = document.querySelector(".activebtncarousel");
  activeBtnCaousel.classList.remove("activebtncarousel");

  if (cardsOrder < btnCarousel.length - 1) {

    //parentCardCarousel.style.transition = "all 0.5s linear";

    cardsOrder = cardsOrder + 1;

    btnCarousel[cardsOrder].classList.add("activebtncarousel");

    carouselWidth += cardsCarousel[0].offsetWidth;

    parentCardCarousel.style.right = carouselWidth + "px";

  } else {

    cardsOrder = 0;

    btnCarousel[cardsOrder].classList.add("activebtncarousel");

    carouselWidth = 0;

    // parentCardCarousel.style.transition = "all 0s linear";
    parentCardCarousel.style.right = carouselWidth + "px";

  }

};

btnCarousel2.onclick = function () {

  activeBtnCaousel = document.querySelector(".activebtncarousel");
  activeBtnCaousel.classList.remove("activebtncarousel");

  if (cardsOrder > 0) {

    //parentCardCarousel.style.transition = "all 0.5s linear";

    carouselWidth -= cardsCarousel[0].offsetWidth;

    parentCardCarousel.style.right = carouselWidth + "px";

    cardsOrder = cardsOrder - 1;

    btnCarousel[cardsOrder].classList.add("activebtncarousel");

  } else {

    //parentCardCarousel.style.transition = "all 0s linear";

    cardsOrder = btnCarousel.length - 1;

    btnCarousel[cardsOrder].classList.add("activebtncarousel");

    carouselWidth = cardsCarousel[0].offsetWidth * (btnCarousel.length - 1);

    parentCardCarousel.style.right = carouselWidth + "px";

    console.log("second");

  }

};
//# sourceURL=pen.js
    </script>

  

</body>

</html>

22. By MD Ashik

Made by MD Ashik. Simple image slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  
<style>
.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
}

.item img {
  height: 400px !important
}
</style>

</head>

<body translate="no" >
  <div class="container">
  <br>
  <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>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/Goole.jpg" alt="Chania 1" width="460" height="345">
      </div>

      <div class="item">
        <img src="https://peterwardhomes.files.wordpress.com/2014/12/goole-area-shot_005.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="https://www.telegraph.co.uk/content/dam/Travel/Destinations/Europe/France/Nice/Nice-nightlife-coastline-xlarge.jpg" alt="Flower 1" width="460" height="345">
      </div>

      <div class="item">
        <img src="https://i.telegraph.co.uk/multimedia/archive/01858/nice3_1858695b.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="https://eastriding.limehouse.co.uk/events/21318/images/highresRGB/2376387_0_1.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</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>

23. By Davi Pereira

Made by Davi Pereira. Anime image Bootstrap slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
  
<style>
.carousel-fade .carousel-item {
  height: 400px;
  opacity: 0;
  transition-duration: 0.6s;
  transition-property: opacity;
}
.carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
}
.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right {
  opacity: 0;
}
.carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active, .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev {
  transform: translateX(0);
  transform: translate3d(0, 0, 0);
}
</style>
</head>

<body translate="no" >
  <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://i.redd.it/ru4azspi85a01.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://images.alphacoders.com/901/901811.png" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://i.pinimg.com/originals/f4/84/65/f48465bacf3fd13519eeb669c303e579.png" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js'></script>
      <script id="rendered-js" >
$('.carousel').carousel();
//# sourceURL=pen.js
    </script>
</body>
</html>

24. By Ondrej

Made by Ondrej. Bootstrap carousel quotes, with simple and smooth animations. Source

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      <script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


  <style id="compiled-css" type="text/css">
      /*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/
body {
    background: linear-gradient(to left, #51cc48, #39df9c);
    min-height: 100vh;
}

.width-auto {
    width: auto;
}

.text-lg {
    font-size: 2rem;
}

.carousel-indicators li {
    border: none;
    background: #ccc;
}

.carousel-indicators li.active {
    background: #28a745;
}


    /* EOS */
  </style>

  <script id="insert"></script>

    <script>
      const customConsole = (w) => {
        const pushToConsole = (payload, type) => {
          w.parent.postMessage({
            console: {
              payload: stringify(payload),
              type:    type
            }
          }, "*")
        }

        w.onerror = (message, url, line, column) => {
          // the line needs to correspond with the editor panel
          // unfortunately this number needs to be altered every time this view is changed
          line = line - 70
          if (line < 0){
            pushToConsole(message, "error")
          } else {
            pushToConsole(`[${line}:${column}] ${message}`, "error")
          }
        }

        let console = (function(systemConsole){
          return {
            log: function(){
              let args = Array.from(arguments)
              pushToConsole(args, "log")
              systemConsole.log.apply(this, args)
            },
            info: function(){
              let args = Array.from(arguments)
              pushToConsole(args, "info")
              systemConsole.info.apply(this, args)
            },
            warn: function(){
              let args = Array.from(arguments)
              pushToConsole(args, "warn")
              systemConsole.warn.apply(this, args)
            },
            error: function(){
              let args = Array.from(arguments)
              pushToConsole(args, "error")
              systemConsole.error.apply(this, args)
            },
            system: function(arg){
              pushToConsole(arg, "system")
            },
            clear: function(){
              systemConsole.clear.apply(this, {})
            },
            time: function(){
              let args = Array.from(arguments)
              systemConsole.time.apply(this, args)
            },
            assert: function(assertion, label){
              if (!assertion){
                pushToConsole(label, "log")
              }

              let args = Array.from(arguments)
              systemConsole.assert.apply(this, args)
            }
          }
        }(window.console))

        window.console = { ...window.console, ...console }

        console.system("Running fiddle")
      }

      if (window.parent){
        customConsole(window)
      }
    </script>
</head>
<body>
    <!-- Demo header-->
<section class="py-5 text-center">
    <div class="container py-4 text-white">
        <header>
            <h1 class="display-4">Bootstrap carousel quotes</h1>
            <p class="font-italic mb-1">Create an elegant quote carousel using default Bootstrap 4 carousel component.</p>
            <p class="font-italic">Snippet by
                <a class="text-white" href="https://bootstrapious.com/">
                    <u>Bootstrapious</u>
                </a>
            </p>
        </header>
    </div>
</section>


<section class="pb-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-xl-8 mx-auto">
                <div class="p-5 bg-white shadow rounded">
                    <!-- Bootstrap carousel-->
                    <div class="carousel slide" id="carouselExampleIndicators" data-ride="carousel">
                        <!-- Bootstrap carousel indicators [nav] -->
                        <ol class="carousel-indicators mb-0">
                            <li class="active" data-target="#carouselExampleIndicators" data-slide-to="0"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        </ol>


                        <!-- Bootstrap inner [slides]-->
                        <div class="carousel-inner px-5 pb-4">
                            <!-- Carousel slide-->
                            <div class="carousel-item active">
                                <div class="media"><img class="rounded-circle img-thumbnail" src="https://bootstrapious.com/i/snippets/sn-slider-quote/avatar-1.jpg" alt="" width="75">
                                    <div class="media-body ml-3">
                                        <blockquote class="blockquote border-0 p-0">
                                            <p class="font-italic lead"> <i class="fa fa-quote-left mr-3 text-success"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                            <footer class="blockquote-footer">Someone famous in
                                                <cite title="Source Title">Source Title</cite>
                                            </footer>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>

                            <!-- Carousel slide-->
                            <div class="carousel-item">
                                <div class="media"><img class="rounded-circle img-thumbnail" src="https://bootstrapious.com/i/snippets/sn-slider-quote/avatar-3.jpg" alt="" width="75">
                                    <div class="media-body ml-3">
                                        <blockquote class="blockquote border-0 p-0">
                                            <p class="font-italic lead"> <i class="fa fa-quote-left mr-3 text-success"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                            <footer class="blockquote-footer">Someone famous in
                                                <cite title="Source Title">Source Title</cite>
                                            </footer>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>

                            <!-- Carousel slide-->
                            <div class="carousel-item">
                                <div class="media"><img class="rounded-circle img-thumbnail" src="https://bootstrapious.com/i/snippets/sn-slider-quote/avatar-2.jpg" alt="" width="75">
                                    <div class="media-body ml-3">
                                        <blockquote class="blockquote border-0 p-0">
                                            <p class="font-italic lead"> <i class="fa fa-quote-left mr-3 text-success"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                            <footer class="blockquote-footer">Someone famous in
                                                <cite title="Source Title">Source Title</cite>
                                            </footer>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- Bootstrap controls [dots]-->
                        <a class="carousel-control-prev width-auto" href="#carouselExampleIndicators" role="button" data-slide="prev">
                            <i class="fa fa-angle-left text-dark text-lg"></i>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next width-auto" href="#carouselExampleIndicators" role="button" data-slide="next">
                            <i class="fa fa-angle-right text-dark text-lg"></i>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

</body>
</html>

25. By Eman Abdelqader

Made by Eman Abdelqader. Simple Bootstrap slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
.slider {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.slider .controll span {
    display: inline-block;
    position: absolute;
    z-index: 999;
    top: 45%
}
.slider .controll span:first-of-type {left: 10px}
.slider .controll span:last-of-type {right: 10px}
.slider .controll .fa {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    padding: 7px;
    color: #fff;
}
.slider .controll .fa:hover, .slider .controll .fa.active {
    cursor: pointer;
    color: #fff;
}
.slider ul {
    position: absolute;
    list-style: none;
}
.slider ul li {
    float: left;
    font-size: 20px;
    text-align: center;
    height: 100vh;
    line-height: 100vh;
    padding-left: 0;
    background: #ff9800;
    color: #fff;
}
.slider ol {
    position: absolute;
    left: 50%;
    bottom: 0;
    color: #fff;
    transform: translate(-50%, -50%);
    list-style: none;
}
.slider ol li {
    display: inline-block;
    cursor: pointer;
}
.slider ol li:hover .fa:before, .slider ol li.pointer-active .fa:before {
    content: "\f111";
    font-family: FontAwesome;
}
</style>

</head>

<body>
  <div class="slider">
    <div class="controll">
        <span><i class="active fa fa-chevron-left fa-2x"></i></span>
        <span><i class="fa fa-chevron-right fa-2x"></i></span>
    </div>
    <ul>
        <li class="slider-active">Slide #01</li>
        <li>Slide #02</li>
        <li>Slide #03</li>
        <li>Slide #04</li>
        <li>Slide #05</li>
    </ul>

    <ol>
        <li class="pointer-active"><i class="fa fa-circle-thin"></i></li>
        <li><i class="fa fa-circle-thin"></i></li>
        <li><i class="fa fa-circle-thin"></i></li>
        <li><i class="fa fa-circle-thin"></i></li>
        <li><i class="fa fa-circle-thin"></i></li>
    </ol>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
      <script id="rendered-js" >
$(function () {
  "use strict";

  var body = $('body'),
  slider = $('.slider'),
  sliderUl = slider.find('> ul'),
  sliderOlLi = slider.find('> ol li'),
  sliderCtrl = slider.find('> .controll .fa'),
  sliderTime = 500,
  sliderWait = 4000,
  autoRun;

  sliderUl.append('<li>' + sliderUl.find('> li').first().html() + '</li>');
  sliderUl.prepend('<li>' + sliderUl.find('> li').last().prev().html() + '</li>');

  function resetDimension() {
    slider.height(sliderUl.height());
    sliderUl.find('> li').width(slider.width());
    sliderUl.width(sliderUl.find('> li').width() * sliderUl.find('> li').length);
  }
  resetDimension();

  $(window).on('resize', function () {
    resetDimension();
  });

  function runSlider() {
    if (sliderUl.find('> li').hasClass('slider-active')) {
      sliderUl.animate({
        left: -sliderUl.find('> li').width() * $('.slider-active').index() },
      sliderTime);
      sliderOlLi.eq($('.slider-active').index() - 1).addClass('pointer-active').siblings('li').removeClass('pointer-active');
    }
  }
  runSlider();

  sliderCtrl.on('click', function () {
    $(this).addClass('active').siblings().removeClass('active');

    if ($(this).hasClass('fa-chevron-left')) {
      if ($('.slider-active').prev().is(':first-of-type')) {
        $('.slider-active').prev().addClass('slider-active').siblings('li').removeClass('slider-active');
        sliderUl.css('left', -sliderUl.find('> li').width() * (sliderUl.find('> li').length - 1));
        sliderUl.find('> li').last().prev().addClass('slider-active').siblings('li').removeClass('slider-active');
      } else {
        $('.slider-active').prev().addClass('slider-active').siblings('li').removeClass('slider-active');
      }
    }
    if ($(this).hasClass('fa-chevron-right')) {
      if ($('.slider-active').next().is(':last-of-type')) {
        $('.slider-active').next().addClass('slider-active').siblings('li').removeClass('slider-active');
        sliderUl.css('left', 0);
        sliderUl.find('> li').first().next().addClass('slider-active').siblings('li').removeClass('slider-active');
      } else {
        $('.slider-active').next().addClass('slider-active').siblings('li').removeClass('slider-active');
      }
    }
    runSlider();
  });

  function autoRunSlider() {
    if (body.css('direction') === 'ltr') {
      autoRun = setInterval(function () {
        sliderCtrl.last().click();
      }, sliderWait);
    } else if (body.css('direction') === 'rtl') {
      autoRun = setInterval(function () {
        sliderCtrl.first().click();
      }, sliderWait);
    }
  }
  autoRunSlider();

  sliderCtrl.on('mouseenter', function () {
    clearInterval(autoRun);
  });
  sliderCtrl.on('mouseleave', function () {
    autoRunSlider();
  });

  sliderOlLi.on('mouseenter', function () {
    clearInterval(autoRun);
  });
  sliderOlLi.on('mouseleave', function () {
    autoRunSlider();
  });


  sliderOlLi.on('click', function () {

    $(this).addClass('pointer-active').siblings().removeClass('pointer-active');

    sliderUl.animate({
      left: -sliderUl.find('> li').width() * ($('.pointer-active').index() + 1) },
    sliderTime);

    sliderUl.find('> li').eq($('.pointer-active').index() + 1).addClass('slider-active').siblings('li').removeClass('slider-active');

  });
});

// Em An
// 4-2017

// https://www.facebook.com/groups/ElzeroWebSchool/permalink/1273846386077756/
//# sourceURL=pen.js
    </script>

  

</body>

</html>

26. By ALIMUL AL RAZY

Made by ALIMUL AL RAZY. Cool animated Bootstrap slider. Source

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald:500" rel="stylesheet">
<script>!function(e){"undefined"==typeof module?this.charming=e:module.exports=e}(function(e,n){"use strict";n=n||{};var t=n.tagName||"span",o=null!=n.classPrefix?n.classPrefix:"char",r=1,a=function(e){for(var n=e.parentNode,a=e.nodeValue,c=a.length,l=-1;++l<c;){var d=document.createElement(t);o&&(d.className=o+r,r++),d.appendChild(document.createTextNode(a[l])),n.insertBefore(d,e)}n.removeChild(e)};return function c(e){for(var n=[].slice.call(e.childNodes),t=n.length,o=-1;++o<t;)c(n[o]);e.nodeType===Node.TEXT_NODE&&a(e)}(e),e});
</script>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<section>

  <div class="swiper-container slideshow">

    <div class="swiper-wrapper">

      <div class="swiper-slide slide">
        <div class="slide-image" style="background-image: url(https://images.unsplash.com/photo-1538083024336-555cf8943ddc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=66b476a51b19889e13182c0e4827af18&auto=format&fit=crop&w=1950&q=80)"></div>
        <span class="slide-title">Exotic places</span>
      </div>

      <div class="swiper-slide slide">
        <div class="slide-image" style="background-image: url(https://images.unsplash.com/photo-1500375592092-40eb2168fd21?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e07d2457879a4e15577ec75a31023e47&auto=format&fit=crop&w=2134&q=80"></div>
        <span class="slide-title">Meet ocean</span>
      </div>

      <div class="swiper-slide slide">
        <div class="slide-image" style="background-image: url(https://images.unsplash.com/photo-1482059470115-0aadd6bf6834?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=267bba9a4e280ec64388fe8fb01e9d1b&auto=format&fit=crop&w=1950&q=80"></div>
        <span class="slide-title">Around the world</span>
      </div>

      <!--         <div class="swiper-slide slide">
          <div class="slide-imageswiper-lazy" data-background="https://images.unsplash.com/photo-1538083024336-555cf8943ddc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=66b476a51b19889e13182c0e4827af18&auto=format&fit=crop&w=1950&q=80">
          </div>
          </div>
          <span class="slide-title">Exotic places</span>
        </div>
      
        <div class="swiper-slide slide">
          <div class="slide-image swiper-lazy" data-background="https://images.unsplash.com/photo-1500375592092-40eb2168fd21?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e07d2457879a4e15577ec75a31023e47&auto=format&fit=crop&w=2134&q=80">
          </div>
          <span class="slide-title">Meet ocean</span>
        </div>
      
        <div class="swiper-slide slide">
          <div class="slide-image swiper-lazy" data-background="https://images.unsplash.com/photo-1482059470115-0aadd6bf6834?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=267bba9a4e280ec64388fe8fb01e9d1b&auto=format&fit=crop&w=1950&q=80">
          </div>
          <span class="slide-title">Around the world</span>
        </div> -->

    </div>

    <div class="slideshow-pagination"></div>

    <div class="slideshow-navigation">
      <div class="slideshow-navigation-button prev"><span class="fas fa-chevron-left"></span></div>
      <div class="slideshow-navigation-button next"><span class="fas fa-chevron-right"></span></div>
    </div>

  </div>

</section>
<style>
section {
  width: 100%;
  height: 100vh;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  font-size: 18px;
  background: #fff;
  overflow: hidden;
}
.slide-image {
  position: absolute;
  top: -200px;
  left: -200px;
  width: calc(100% + 400px);
  height: calc(100% + 400px);
  background-position: 50% 50%;
  background-size: cover;
}
.slide-title {
  font-size: 4rem;
  line-height: 1;
  max-width: 50%;
  white-space: normal;
  word-break: break-word;
  color: #FFF;
  z-index: 100;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
}
@media (min-width: 45em) {
  .slide-title {
    font-size: 7vw;
    max-width: none;
  }
}
.slide-title span {
  white-space: pre;
  display: inline-block;
  opacity: 0;
}

.slideshow {
  position: relative;
}
.slideshow-pagination {
  position: absolute;
  bottom: 5rem;
  left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transition: .3s opacity;
  z-index: 10;
}
.slideshow-pagination-item {
  display: flex;
  align-items: center;
}
.slideshow-pagination-item .pagination-number {
  opacity: 0.5;
}
.slideshow-pagination-item:hover, .slideshow-pagination-item:focus {
  cursor: pointer;
}
.slideshow-pagination-item:last-of-type .pagination-separator {
  width: 0;
}
.slideshow-pagination-item.active .pagination-number {
  opacity: 1;
}
.slideshow-pagination-item.active .pagination-separator {
  width: 10vw;
}
.slideshow-navigation-button {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 5rem;
  z-index: 1000;
  transition: all .3s ease;
  color: #FFF;
}
.slideshow-navigation-button:hover, .slideshow-navigation-button:focus {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
}
.slideshow-navigation-button.prev {
  left: 0;
}
.slideshow-navigation-button.next {
  right: 0;
}

.pagination-number {
  font-size: 1.8rem;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  padding: 0 0.5rem;
}

.pagination-separator {
  display: none;
  position: relative;
  width: 40px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  transition: all .3s ease;
}
@media (min-width: 45em) {
  .pagination-separator {
    display: block;
  }
}
.pagination-separator-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  transform-origin: 0 0;
}

    </style>
<script>
    // The Slideshow class.
class Slideshow {
    constructor(el) {
        
        this.DOM = {el: el};
      
        this.config = {
          slideshow: {
            delay: 3000,
            pagination: {
              duration: 3,
            }
          }
        };
        
        // Set the slideshow
        this.init();
      
    }
    init() {
      
      var self = this;
      
      // Charmed title
      this.DOM.slideTitle = this.DOM.el.querySelectorAll('.slide-title');
      this.DOM.slideTitle.forEach((slideTitle) => {
        charming(slideTitle);
      });
      
      // Set the slider
      this.slideshow = new Swiper (this.DOM.el, {
          
          loop: true,
          autoplay: {
            delay: this.config.slideshow.delay,
            disableOnInteraction: false,
          },
          speed: 500,
          preloadImages: true,
          updateOnImagesReady: true,
          
          // lazy: true,
          // preloadImages: false,

          pagination: {
            el: '.slideshow-pagination',
            clickable: true,
            bulletClass: 'slideshow-pagination-item',
            bulletActiveClass: 'active',
            clickableClass: 'slideshow-pagination-clickable',
            modifierClass: 'slideshow-pagination-',
            renderBullet: function (index, className) {
              
              var slideIndex = index,
                  number = (index <= 8) ? '0' + (slideIndex + 1) : (slideIndex + 1);
              
              var paginationItem = '<span class="slideshow-pagination-item">';
              paginationItem += '<span class="pagination-number">' + number + '</span>';
              paginationItem = (index <= 8) ? paginationItem + '<span class="pagination-separator"><span class="pagination-separator-loader"></span></span>' : paginationItem;
              paginationItem += '</span>';
            
              return paginationItem;
              
            },
          },

          // Navigation arrows
          navigation: {
            nextEl: '.slideshow-navigation-button.next',
            prevEl: '.slideshow-navigation-button.prev',
          },

          // And if we need scrollbar
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        
          on: {
            init: function() {
              self.animate('next');
            },
          }
        
        });
      
        // Init/Bind events.
        this.initEvents();
        
    }
    initEvents() {
        
        this.slideshow.on('paginationUpdate', (swiper, paginationEl) => this.animatePagination(swiper, paginationEl));
        //this.slideshow.on('paginationRender', (swiper, paginationEl) => this.animatePagination());

        this.slideshow.on('slideNextTransitionStart', () => this.animate('next'));
        
        this.slideshow.on('slidePrevTransitionStart', () => this.animate('prev'));
            
    }
    animate(direction = 'next') {
      
        // Get the active slide
        this.DOM.activeSlide = this.DOM.el.querySelector('.swiper-slide-active'),
        this.DOM.activeSlideImg = this.DOM.activeSlide.querySelector('.slide-image'),
        this.DOM.activeSlideTitle = this.DOM.activeSlide.querySelector('.slide-title'),
        this.DOM.activeSlideTitleLetters = this.DOM.activeSlideTitle.querySelectorAll('span');
      
        // Reverse if prev  
        this.DOM.activeSlideTitleLetters = direction === "next" ? this.DOM.activeSlideTitleLetters : [].slice.call(this.DOM.activeSlideTitleLetters).reverse();
      
        // Get old slide
        this.DOM.oldSlide = direction === "next" ? this.DOM.el.querySelector('.swiper-slide-prev') : this.DOM.el.querySelector('.swiper-slide-next');
        if (this.DOM.oldSlide) {
          // Get parts
          this.DOM.oldSlideTitle = this.DOM.oldSlide.querySelector('.slide-title'),
          this.DOM.oldSlideTitleLetters = this.DOM.oldSlideTitle.querySelectorAll('span'); 
          // Animate
          this.DOM.oldSlideTitleLetters.forEach((letter,pos) => {
            TweenMax.to(letter, .3, {
              ease: Quart.easeIn,
              delay: (this.DOM.oldSlideTitleLetters.length-pos-1)*.04,
              y: '50%',
              opacity: 0
            });
          });
        }
      
        // Animate title
        this.DOM.activeSlideTitleLetters.forEach((letter,pos) => {
					TweenMax.to(letter, .6, {
						ease: Back.easeOut,
						delay: pos*.05,
						startAt: {y: '50%', opacity: 0},
						y: '0%',
						opacity: 1
					});
				});
      
        // Animate background
        TweenMax.to(this.DOM.activeSlideImg, 1.5, {
            ease: Expo.easeOut,
            startAt: {x: direction === 'next' ? 200 : -200},
            x: 0,
        });
      
        //this.animatePagination()
    
    }
    animatePagination(swiper, paginationEl) {
            
      // Animate pagination
      this.DOM.paginationItemsLoader = paginationEl.querySelectorAll('.pagination-separator-loader');
      this.DOM.activePaginationItem = paginationEl.querySelector('.slideshow-pagination-item.active');
      this.DOM.activePaginationItemLoader = this.DOM.activePaginationItem.querySelector('.pagination-separator-loader');
      
      console.log(swiper.pagination);
      // console.log(swiper.activeIndex);
      
      // Reset and animate
        TweenMax.set(this.DOM.paginationItemsLoader, {scaleX: 0});
        TweenMax.to(this.DOM.activePaginationItemLoader, this.config.slideshow.pagination.duration, {
          startAt: {scaleX: 0},
          scaleX: 1,
        });
      
      
    }
    
}

const slideshow = new Slideshow(document.querySelector('.slideshow'));

</script>

27. By Reech Studio

Made by Reech Studio. Hero Section Bootstrap slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i,700i" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<style>
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  top: 0px;
  left: 0px;
  margin: 0 auto;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .hide {
    display: none !important;
  }
}
/*..................*/

#hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  box-sizing: border-box;
}

.slider {
  position: absolute;
  z-index: 3;
  left: 20%;
  top: 11%;
}
@media only screen and (max-width: 768px) {
  .slider {
    position: absolute;
    padding: 10%;
    margin: 0 auto;
    width: 100%;
    display: block;
    left: 0;
    top: 0;
  }
}
/*.......Slider...........*/

.sb-box {
  position: absolute;
  margin-bottom: 0;
  bottom: -4vh;
  height: 14%;
  width: 27%;
  right: 1vw;
  z-index: 999;
  background-color: #e54b4b;
}
@media only screen and (max-width: 768px) {
  .sb-box {
    bottom: 4vh;
    right: 14vw;
  }
}

.hero-carousel {
  position: relative;
}
.carousel-item img {
  height: 475px !important;
  width: 450px !important;
  object-fit: cover;
}
.carousel-control-next,
.carousel-control-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
}
.carousel-control-next,
.carousel-control-prev {
  width: 40%;
}
.carousel-control-prev {
  left: 0;
}
.carousel-control-next {
  right: 0;
}
.carousel-control-prev-icon {
  background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org);
  opacity: 1;
  height: 100px;
  
  background-repeat: no-repeat;
}
.carousel-control-next-icon {
  background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org);
  opacity: 1;
  height: 100px;
 
  background-repeat: no-repeat;
  float: left;
}

/*.......Sec Two...........*/
.lrb {
  position: absolute;
  width:2.5vw;
  height:80vh;
   background-color: #e54b4b;
  right:0;
  top:0;
}
.lgb {
  position: absolute;
  width:2.5vw;
 background-color: #5d5c69 !important;
  bottom:0;
  right:0;
  height:20vh;
}
.red-sec {
  position: absolute;
  height: 100%;
  bottom: 0;
  background-color: #e54b4b;
  width: 40%;
  z-index: 2;
  left: 0;
}
.grey-sec {
  position: absolute;
  height: 100%;
  bottom: 0;
  background-color: #f4f4f4;
  width: 60%;
  z-index: 2;
  left: 40%;
}
@media only screen and (max-width: 768px) {
  .grey-sec {
    width: 100% !important;
    display: block;
    width: 100%;
    left: 0;
    right: 0;
    height: 100vh;
    bottom: 0;
    top: 0;
  }
}
.rbg {
  background-image: url(http://lp3.1a5.myftpupload.com/wp-content/uploads/2019/02/memphis-bg.jpg);
  background-repeat: no-repeat;
  background-position: cover;
  z-index: -1;
}
/*.......Intro Text...........*/

.intro-box {
  left: 58%;
  position: absolute;
  font-family: "Poppins", sans-serif;
  text-align: left;
  top: 18%;
  z-index: 999;
}
@media only screen and (max-width: 768px) {
  .intro-box {
    top: 70vh;
    left: 0;
    width: 60%;
    background-color: #fff;
    bottom: 0;
    z-index: 3;
  }
}
.in-txt {
  font-size: 46px;
  letter-spacing: -0.01em;
  font-weight: 800;
  line-height: 3.4rem;
  color: #5d5c69;
  width: 70%;
  margin-top: 4vh;
}
@media only screen and (max-width: 768px) {
  .in-txt {
    font-size: 26px;
    line-height: 1.5em;
    color: #e54b4b;
    width: 80%;
    margin: 5% 10%;
  }
}
.in-title {
  margin-bottom: 2vh;
  font-weight: 600;
  color: #5d5c69;
  font-size: 18px;
}
.in-title:after {
  position: absolute;
  content: "";
  background: #e54b4b;
  height: 3px;
  width: 10%;
  display: block;
  margin-top: 0.5em;
  opacity: 0.8;
}
.in-b-txt {
  margin-bottom: 6vh;
  font-weight: 400;
  color: #5d5c69;
  font-size: 16px;
  margin-top: 2vh;
  width: 60%;
}

/*.........Left Text...............*/

.l-box {
  left: 12vw;
  position: absolute;
  height: 100%;
  width: 20%;
  text-align: left;
  top: -4vh;
  z-index: 999;
  font-family: "Poppins", sans-serif;
}

.social-wrapper {
  position: absolute;
  text-align: center;
  top: 25vh;
  left: -1vw;
  line-height: 1;
  z-index: 5;
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.s-down {
  position: absolute;
  text-align: right;
  top: 50%;
  left: -3.5vw;
  width: 100%;
  line-height: 1;
  z-index: 5;
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}
.s-down a {
  font-family: "Poppins", sans-serif;
  color: #f4f4f4 !important;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 100;
  line-height: 1.4rem;
  text-decoration: none;
  display: block;
  position: relative;
  padding-bottom: 0.8rem;
  overflow: hidden;
}

.s-down a:hover {
}
.s-down a:before {
  position: absolute;
  top: 25%;
  right: 11vw;
  width: 40%;
  height: 1px;
  background: #f4f4f4;
  content: " ";
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

/*............Social..........*/
.social-wrapper {
  left: 6.8rem;
  top: 98%;
}
@media only screen and (max-width: 768px) {
  .social-wrapper {
    left: -6vw !important;
    top: 97% !important;
    z-index: 3;
  }
}
.social-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
}
.social-wrapper ul li:not(:last-child) {
  margin-right: 2rem;
}
.social-wrapper a {
  text-decoration: none;
  color: #f4f4f4 !important;
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .social-wrapper a {
    color: #e54b4b !important;
  }
}
.social-wrapper a:hover {
  cursor: pointer;
  -webkit-transition: color 0.15s ease-out;
  -moz-transition: color 0.15s ease-out;
  transition: color 0.15s ease-out;
  color: #5d5c69 !important;
}

/*.......btn..........*/

.button-block {
  position: absolute;
  left: 0;
  bottom: -2.5rem;
  z-index: 7;
  transition: all 0.25s ease-out;
}
.button-block {
  display: inline-block;
  padding: 1em 1.3em 1em;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: cubic-bezier(0.22, 0.61, 0.36, 1);
  text-decoration: none;
}
.button-block--brand {
  border: 2px solid #5d5c69;
  color: #5d5c69;
  box-shadow: 2px 2px 0;
}
.button-block--brand:hover {
  border: 2px solid #e54b4b;
  color: #e54b4b;
  box-shadow: -2px -2px 0;
  -webkit-transition: color 0.15s ease-out;
  -moz-transition: color 0.15s ease-out;
  transition: color 0.15s ease-out;
  transition: all 0.4s;
  text-decoration: none !important;
}
.button-block--brand:hover:after {
  content: "";
  position: absolute;
  left: 14%;
  bottom: 13px;
  width: 80%;
  background: url(https://promo-theme.com/rolly/wp-content/themes/rolly/images/nav-hover.png)
    50% repeat;
  background-size: 12px auto;
  height: 12px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: -1;
}
</style>
</head>
<body>
<div id="hero">
  <div class="slider">
    <div class="hero-carousel">
      <div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://reechco.com/wp-content/uploads/2022/02/redhead.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://reechco.com/wp-content/uploads/2022/02/smoke-bc-cannabis-canada.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://reechco.com/wp-content/uploads/2019/01/h5-img-1-1.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
      </div>
    </div>

    <div class="sb-box">
      <a class="carousel-control-prev" href="#carouselFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
      <a class="carousel-control-next" href="#carouselFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

    </div>

  </div>

  <div class="red-sec hide"></div>
  <div class="lrb"></div>
  <div class="lgb"></div>
  <div class="l-box">
    <div class="s-down"><a href="#">go to projects</a></div>

    <div class="social-wrapper">
      <ul>

        <li><a href "#"><i class="fa fa-facebook"></i></a></li>
        <li><a href "#"><i class="fa fa-codepen"></i></a></li>
        <li><a href "#"><i class="fa fa-instagram"></i></a></li>
      </ul>
    </div>
  </div>
  <div class="intro-box">
    <div class="in-title hide">Reech Studio.</div>
    <div class="in-txt">We craft brands throught visual content.</div>
    <div class="in-b-txt hide">Work around you and your team. Work around you and your team.</div>

    <a href="#" class="button-block button-block--brand active hide">get started</a>

  </div>

</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$('.carousel').carousel({
  interval: 9000 });
    </script>
</body>
</html>

28. By Hillary Sousa

Made by Hillary Sousa. Slider full width. Source

<!DOCTYPE html>
<html lang="en" >

<head>
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/2.9.9/css/jquery.mb.YTPlayer.min.css'> 
<style>
.bannerFull {
    position: fixed;
    width: 100%;
    z-index: 0;
    height: 545px;
    top: 0;
}

.banner-principal .slider-conteudo-html {
    min-height: 455px;
    display: block;
    background: #cccccc;
}

.banner-interna .slider-conteudo-html {
    height: 255px;
    display: block;
    background: #cccccc;
}


.slider-grande-modelo1 .slide-h1 {
    text-align: left;
    margin-top: 30%;
    color:#fff;
    font-size:40px;
    line-height: 40px;
}

.slider-grande-modelo1 .slide-h2 {
    text-align: left;
    color:#fff;
    font-size:35px;
    line-height: 35px;
}

.slider-grande-modelo1 .slide-h3 {
    text-align: left;
    color:#fff;
    font-size:30px;
    line-height: 30px;
}

.slider-grande-modelo1 {
    min-height: 455px;
}

.slider-grande-modelo1 .content-table {
    position: relative;
    display: table;
    display:block\9;
    height: 450px;
}

.slider-grande-modelo1 .content-table .img-container {
    display: table-cell;
    display:block\9;
    padding-top:80px\9;
    vertical-align: middle;
}

.slider-grande-modelo1 .slide-btn {
    background-image: none;
    color: #D92222;
    text-shadow: none;
    background-color: #FFF;
    opacity: 0.9;
    font-size: 18px;
    margin-top: 15px;
}

.slider-grande-modelo1 .slide-btn:hover {
    opacity: 1;
}

.slider-medio-modelo1 .slide-h1 {
    text-align: left;
    margin-top: 12%;
    color:#fff;
    font-size:30px;
    line-height: 40px;
}

.slider-medio-modelo1 .slide-h2 {
    text-align: left;
    color:#fff;
    font-size:35px;
    line-height: 35px;
}

.slider-medio-modelo1 .slide-h3 {
    text-align: left;
    color:#fff;
    font-size:30px;
    line-height: 30px;
}

.slider-medio-modelo1 {
    min-height: 255px;
}

.slider-medio-modelo1 .content-table {
    position: relative;
    display: table;
    display:block\9;
    height: 255px;
}

.slider-medio-modelo1 .content-table .img-container {
    display: table-cell;
    display:block\9;
    padding-top:30px\9;
    vertical-align: middle;
}

.slider-medio-modelo1 .slide-btn {
    background-image: none;
    color: #D92222;
    text-shadow: none;
    background-color: #FFF;
    opacity: 0.9;
    font-size: 25px;
    margin-top: 15px;
}

.slider-medio-modelo1 .slide-btn:hover {
    opacity: 1;
}





.slider-conteudo-video {
}

.slider-conteudo-imagem {
    max-height: 455px;
    overflow: hidden;
}

    .slider-conteudo-imagem img {
        width: 100%;
        min-width: 1400px;
        transform: translate(-50%,0);
        position: relative;
        left: 50%;
    }

.conteudoPrincipal {
    background-color: #fff;
    margin-top: -12px;
    padding-top: 30px;
}

/* Indicadores do banner*/
.carousel-indicators {
    bottom: 40px;
}

/*Conteudo banner 01*/
.conteudoBanner {
    background-color: #fff;
    display: block;
    position: absolute;
    top: 30px;
    right: 10%;
    height: 400px;
    width: 400px;
    -webkit-box-shadow: 0 0 25px #000;
    -moz-box-shadow: 0 0 25px #000;
    box-shadow: 0 0 25px #000;
    text-align: center;
    color: #266B33;
    font-size: 31px;
    padding-top: 20px;
}

    .conteudoBanner .txtDestaque {
        font-size: 50px;
    }

.video-section .pattern-overlay {
background-color: rgba(71, 71, 71, 0);
padding: 110px 0 32px;
min-height: 496px; 
/* Incase of overlay problems just increase the min-height*/
}
.video-section h1, .video-section h3{
text-align:center;
color:#fff;
}
.video-section h1{
font-size:110px;
font-family: 'Buenard', serif;
font-weight:bold;
text-transform: uppercase;
margin: 40px auto 0px;
text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow: 1px 1px 1px #000;
}
.video-section h3{
font-size: 25px;
font-weight:lighter;
margin: 0px auto 15px;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
#carousel-principal .fa-spin{
    position: absolute;
    left: 50%;
    color: #000;
    font-size: 50px;
    top: 200px;
}

#carousel-interno .fa-spin{
    position: absolute;
    left: 50%;
    color: #000;
    font-size: 50px;
    top: 200px;
}
</style>
</head>
<body>
  <!-- Banner : Inรญcio -->
<div class="bannerFull banner-principal">
    <div id="carousel-principal" class="carousel slide" data-ride="carousel">
        <ol class='carousel-indicators'>
<li data-target='#carousel-principal' data-slide-to='0' class='active'></li>
<li data-target='#carousel-principal' data-slide-to='1'></li>
<li data-target='#carousel-principal' data-slide-to='2'></li>
</ol>
<div class='carousel-inner' role='listbox'>
<div class='item active' data-interval='10'>
<div class='slider-conteudo-html'><div class="container-fluid slider-grande-modelo1" style="background-color:#D92222;">
    <div class="container">
        <div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-1 hidden-xs">
            <div class="content-table">
                <div class="img-container">
                    <img src="/img/slider-cartao.png" class="img-responsive animated pulse">
                </div>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-1">
            <h1 class="slide-h1 animated fadeInRight">Cartรฃo Leader</h1>
           <h2 class="slide-h2 animated fadeInRight">Um mundo de vantagens</h2>
            <a href="/familia-de-produtos/cartoes-tamanho-familia/cartao-leader/" class="slide-btn btn btn-block">Solicite seu Cartรฃo</a>
        </div>
    </div>
</div>

</div></div>
<div class='item' data-interval='20'>
<div class='slider-conteudo-html'><div class="container-fluid slider-grande-modelo1" style="background-color:#0080b4;">
    <div class="container">
        <div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-1 hidden-xs">
            <div class="content-table">
                <div class="img-container">
                    <img src="/img/slider-fatura.png" class="img-responsive animated pulse">
                </div>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-1">
            <h1 class="slide-h1 animated fadeInRight">Fatura Via E-mail</h1>
           <h3 class="slide-h3 animated fadeInRight">Ter um planeta sustentรกvel depende de todos nรณs</h3>
            <a href="/fatura-via-email/" class="slide-btn btn btn-block" style="background-color: #5BB033;color: #0080b4;">Solicite sua fatura por e-mail</a>
        </div>
    </div>
</div>
</div></div>
<div class='item' data-interval='15'>
<i class='fa fa-refresh fa-spin'></i><div class='slider-conteudo-video inativo'>
<section class='content-section video-section video-section-2'><div class='pattern-overlay'><a id='bgndVideo_2' class='player' data-property="{videoURL:'https://www.youtube.com/watch?v=ta0PjRlbfDg',containment:'.video-section-2',showControls:false, showYTLogo:false, stopMovieOnBlur:false, autoPlay:true, mute:true, startAt:0, opacity:1}">bg</a><div class='container'><div class='row'><div class='col-lg-12'><h1></h1><h3></h3></div></div></div></div></section></div></div>
</div>
        <a class="left carousel-control" href="#carousel-principal" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Anterior</span>
        </a>
        <a class="right carousel-control" href="#carousel-principal" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Prรณxima</span>
        </a>
    </div>
</div>
<!-- Banner : Fim -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/2.9.9/jquery.mb.YTPlayer.js'></script>
      <script>
$(document).ready(function () {


  var sliderList = $('#carousel-principal .carousel-inner .item');
  sliderList.each(function (index) {
    var video = $(this).find('#bgndVideo_' + index);
    if (video.length > 0) {
      video.mb_YTPlayer();
    }
  });
  var $carousel = $('#carousel-principal');
  var timerSlider;
  $carousel.carousel({ interval: false });
  $carousel.bind('slide.bs.carousel', function (e) {

    console.log($(e.relatedTarget).data('interval') * 1000);
    clearTimeout(timerSlider);
    timerSlider = setTimeout(
    function () {
      $carousel.carousel('next');
    },
    $(e.relatedTarget).data('interval') * 1000);



  });

  timerSlider = setTimeout(
  function () {
    $carousel.carousel('next');
  },
  $carousel.find('.item.active').data('interval') * 1000);


  var sliderVideoInterval = setInterval(function () {sliderVideoTimer();}, 500);

  function sliderVideoTimer() {
    var sliderVideo = $carousel.find('.item.active').find('.slider-conteudo-video');
    if (sliderVideo.length > 0) {
      jQuery(window).resize();
    }
  }
  $carousel.mouseenter(function () {
    clearTimeout(timerSlider);
    console.log("sliderMouseEnter");
  }).mouseleave(function () {
    console.log("sliderMouseLeave");
    clearTimeout(timerSlider);
    timerSlider = setTimeout(
    function () {
      $carousel.carousel('next');
    },
    $carousel.find('.item.active').data('interval') * 1000);

  });

});
    </script>
</body>
</html>

29. By Christian Carlsson

Made by Christian Carlsson. Very Basic Bootstrap Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
html, body {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.carousel-inner, .carousel, .item, .container, .fill {
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.carousel-inner > .item{
  top: 0;
}
.slide-wrapper {
  display: inline;
}
.slide-wrapper .container {
  padding: 0px;
}

/*------------------------------ vertical bootstrap slider----------------------------*/
.carousel-inner > .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-inner > .item,
.carousel-inner > .active.left,
.carousel-inner > .active.right {
  opacity: 0;
}
.carousel-inner > .active,
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  opacity: 1;
}
.carousel-inner > .next,
.carousel-inner > .prev,
.carousel-inner > .active.left,
.carousel-inner > .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-indicators {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 20px;
  right: 20px;
  left: auto;
  width: auto;
}
.carousel-indicators li {
  display: block;
  margin-bottom: 8px;
  border: 1px solid #fff;
}
.carousel-indicators li.active {
  margin-bottom: 8px;
  background: #fff;
}
</style>
</head>
<body>
  <section class="slide-wrapper">
<div class="container">
<div id="myCarousel" class="carousel slide  fed carousel-fade" 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>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <div class="fill" style="background-color:#48c3af; background-image:url(http://www.mrwallpaper.com/wallpapers/dandelion-Background.jpg);"></div>
      </div>
      <div class="item">
        <div class="fill" style="background-color:#b33f4a;background-image:url(http://3.bp.blogspot.com/-OLdE-ALRH7Y/TcABVGXzufI/AAAAAAAAAEY/aU0a9roJhtc/s1600/Amazing++Beautiful+Fresh+Flowers+%25281%2529.jpg);"></div>
      </div>
      <div class="item">
        <div class="fill" style="background-color:#7fc2f4;background-image:url(https://images6.alphacoders.com/347/347733.jpg);"></div>
      </div>
      <div class="item">
        <div class="fill" style="background-color:#e47794; background-image:url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Flower-Backgrounds-HD-Wallpaper-7.jpg);"></div>
      </div>
    </div>
</div>
</div>
</section>
<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>
      <script>
$(document).ready(function () {
  // invoke the carousel
  $('#myCarousel').carousel({
    interval: false });


  // scroll slides on mouse scroll 
  $('#myCarousel').bind('mousewheel DOMMouseScroll', function (e) {

    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      $(this).carousel('prev');

    } else
    {
      $(this).carousel('next');

    }
  });

  //scroll slides on swipe for touch enabled devices 

  $("#myCarousel").on("touchstart", function (event) {

    var yClick = event.originalEvent.touches[0].pageY;
    $(this).one("touchmove", function (event) {

      var yMove = event.originalEvent.touches[0].pageY;
      if (Math.floor(yClick - yMove) > 1) {
        $(".carousel").carousel('next');
      } else
      if (Math.floor(yClick - yMove) < -1) {
        $(".carousel").carousel('prev');
      }
    });
    $(".carousel").on("touchend", function () {
      $(this).off("touchmove");
    });
  });

});
    </script>
</body>
</html>

30. By ameer ali

Made by ameer ali. Basic Vertical Slider using Bootstrap 4. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'> 
<style>
body{
    margin-top: 100px;
    width:100%;
    height:100%;
}
.carousel-inner,.carousel,.carousel-item,.container,.fill {
    height:100%;
    min-height:400px;
    width:100%;
    background-position:center center;
    background-size:cover;
}
.slide-wrapper{display:inline;}
.slide-wrapper .container{padding:0;}


/*------------------------------ vertical bootstrap slider----------------------------*/

.carousel-inner> .carousel-item.carousel-item-next ,
.carousel-inner > .carousel-item.active.carousel-item-right{ 
    transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0);  top: 0;
    
}
.carousel-inner > .carousel-item.carousel-item-prev ,
.carousel-inner > .carousel-item.active.carousel-item-left{ 
    transform: translate3d(0,-100%, 0); -webkit-transform: translate3d(0,-100%, 0);  -moz-transform: translate3d(0,-100%, 0);-ms-transform: translate3d(0,-100%, 0); -o-transform: translate3d(0,-100%, 0); top: 0;
    
}
.carousel-inner > .carousel-item.next.carousel-item-left ,
.carousel-inner > .carousel-item.carousel-item-prev.carousel-item-right ,
.carousel-inner > .carousel-item.active{
    transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);; -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); top:0;
    
}

/*------------------------------- vertical carousel indicators ------------------------------*/
.carousel-indicators{
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    height:20px;
    right:10px; left:auto;
    width:auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.carousel-indicators li{
    display:block; margin-bottom:5px; border:1px solid #00a199; 
    
}
.carousel-indicators li.active{
    margin-bottom:5px; background:#00a199;
    
}
</style>
</head>
<body>
  <!------ Include the above in your HEAD tag ---------->

<section class="slide-wrapper">
    <div class="container">
	    <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>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="fill" style=" background-color:#48c3af;">1</div>
                </div>
                <div class="carousel-item">
                    <div class="fill" style=" background-color:#b33f4a;">2</div>
                </div>
                <div class="carousel-item">
                    <div class="fill" style=" background-color:#7fc2f4;">3</div>
                </div>
                <div class="carousel-item">
                    <div class="fill" style=" background-color:#e47794;">4</div>
                </div>
            </div>
        

        </div>
    </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
      <script>
$('#myCarousel').carousel({
  interval: false });


//scroll slides on swipe for touch enabled devices

$("#myCarousel").on("touchstart", function (event) {

  var yClick = event.originalEvent.touches[0].pageY;
  $(this).one("touchmove", function (event) {

    var yMove = event.originalEvent.touches[0].pageY;
    if (Math.floor(yClick - yMove) > 1) {
      $(".carousel").carousel('next');
    } else
    if (Math.floor(yClick - yMove) < -1) {
      $(".carousel").carousel('prev');
    }
  });
  $(".carousel").on("touchend", function () {
    $(this).off("touchmove");
  });
});
    </script>
</body>
</html>