JSFiddle - React, Tailwind, and code Playground

by Aman Turate

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide vertical" data-ride="carousel">
       
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
            <li data-target="#carousel-example-generic" data-slide-to="1"> </li>
            <li data-target="#carousel-example-generic" data-slide-to="2"> </li>
        </ol>
        <div class="carousel-inner">
            <div class="item active first">
               
                
                <div class="container">
                    <div class="carousel-caption">
                        <h1 class="pull-right">CHECK OUR VIDEO</h1>
                        <div class="clearfix"></div>
                        <p class="pull-right">LEARNING IN 6 WEEKS</p>
                        <div class="clearfix"></div>
                        <p><a class="btn btn-lg btn-primary pull-right" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a></p>
                    </div>
                </div>
            
            </div>
            <div class="item second">
                
                <div class="container">
                    <div class="carousel-caption">
                        <h1 class="pull-right">CHECK OUR VIDEO</h1>
                        <div class="clearfix"></div>
                        <p class="pull-right">LEARNING IN 6 WEEKS</p>
                        <div class="clearfix"></div>
                        <p><a class="btn btn-lg btn-primary pull-right" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a></p>
                    </div>
                </div>
           ...

CSS

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 520px;
  
}

.carousel h1{
    color: white;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
    background-image: linear-gradient(90deg,rgba(57,55,67,0.5),rgba(12,11,17,0.5));
    width: 100%;
    left: 0;
    padding-right: 90px;
}

/* Declare heights because of positioning of img element */
.carousel.vertical .item {
  height: 520px;
  background-color: #777;
     background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
    bottom: 0;
  left: 0;
  min-width: 100%;
  height: 520px;
}

.carousel-caption h1{font-size: 4em;}
.carousel-caption p{font-size: 2em;}

.carousel-control{
    z-index: 15;
}

.carousel-indicators{
    top: 40%;
    left: 100%;
    margin-left: -5%;
    z-index: 20;
    width: auto;
    padding-right: 10px;
}

.carousel-indicators li {
  display: block;
    margin-bottom: 5px;
}

.carousel-indicators .active {
    margin-bottom: 5px;
}


/* vertical carousel*/
.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .item {
   -webkit-transition: 0.6s ease-in-out top;
   -moz-transition: 0.6s ease-in-out top;
   -ms-transition: 0.6s ease-in-out top;
   -o-transition: 0.6s ease-in-out top;
   transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
   top: 0;
}

.carousel.vertical .next {
   top: 100%;
}

.carousel.vertical .prev {
   top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
   top: 0%;
}

.carousel.vertical .active.left {
   top: -100%;
}

.carousel.vertical .active.right {
   top: 100%;

}


/*vertical carousel setting ends*/

/*  carousel customization ends */

JavaScript

$('.carousel').carousel({
        data-interval: 3000;
    }
    );