JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://roktest5.pokeraffiliatesolutions.com/css/bootstrap.min.css">
<script src="http://roktest5.pokeraffiliatesolutions.com/js/bootstrap.min.js"></script>
  <div class="col-md-4">
              <!--Carousel-->
              <div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators grey">
                  <li data-target="#sidebar-carousel-1" data-slide-to="0" class="active"></li>
                  <li data-target="#sidebar-carousel-1" data-slide-to="1"></li>
                  <li data-target="#sidebar-carousel-1" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="item active">
                    <a href="" data-lightbox="image-1" title="">
                    <img src="http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="...">
                    </a>
                  </div>
                  <div class="item">
                    <a href="" data-lightbox="image-1" title="">
                    <img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="...">
                    </a>                  </div>
                  <div class="item">
                    <a href="" data-lightbox="image-1" title="">
                    <img src="http://shrani.si/f/h/To/1yjUEZbP/img3.jpg" alt="...">
                    </a>                  </div>
                </div>
                 <!-- Controls -->
            <a class="left carousel-control" href="#sidebar-carousel-1" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#sidebar-carousel-1" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
                      </div><!--/Carousel--></div>

CSS

/*=======================================================================
  Carousel
  =======================================================================*/
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    max-width: inherit;


    width: 100%;
  }
  .carousel-indicators {
    bottom: -45px;
  }
  .carousel-indicators li.sqare,
  .carousel-indicators.sqare .active{
    width: 15px;
    height: 15px;
  }
  .carousel-indicators.sqare li {
    border: 0;
    border-radius: 0;
    background: #89857e;
    margin: 1px 7px;
  }
  .carousel-indicators.sqare .active{
    background: #e2960e;
    margin: 1px 7px;
  }
  .carousel-indicators li.grey,
  .carousel-indicators.grey .active{
    width: 12px;
    height: 12px;
  }
  .carousel-indicators.grey li {
    border: 1px solid #474747;
  }
  .carousel-indicators.grey .active{
    background-color: #474747;
  }
  .carousel-control.left,
  .carousel-control.right {
    background-image: none;
    opacity: 1;
    width: 40px;
    z-index: 11;
  }
  .carousel-control.left{
    left: -15px;
  }
  .carousel-control.right{
    right: -15px;
  }
  .carousel-control .icon-prev, 
  .carousel-control .icon-next, 
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right {
    text-indent: -999em;
    background: #89857e;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-top:-20px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .carousel-control .icon-prev, 
  .carousel-control .glyphicon-chevron-left{
    background-image: url(http://shrani.si/f/3M/7p/432iL73B/prev.png);
    left: 37%;
  }
  .carousel-control .icon-next, 
  .carousel-control .glyphicon-chevron-right{
    background-image: url(http://shrani.si/f/m/yP/242luj32/next.png);
    left: -37%;
  }
  .carousel .carousel-control{
   display:none;
  }
  .carousel:hover .carousel-control{
    display:block;
  }
  .carousel-caption {
    text-align: left;
   ...