<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <div class="col-xs-10 col-md-6"> <div id="carousel-custom" class="carousel slide" data-ride="carousel"> <div class="carousel-outer"> <!-- me art lab slider --> <div class="carousel-inner"> <div class="item active"> <img src="https://static.pexels.com/photos/128939/pexels-photo-128939.jpeg" alt=""/> </div> <div class="item"> <img src="https://static.pexels.com/photos/206470/pexels-photo-206470.jpeg" /> </div> <div class="item"> <img src="https://static.pexels.com/photos/119616/pexels-photo-119616.jpeg" /> </div> <div class="item"> <img src="https://static.pexels.com/photos/247287/pexels-photo-247287.jpeg"/> </div> <div class="item"> <img src="https://static.pexels.com/photos/4156/fashion-woman-model-portrait.jpg"/> </div> <div class="item"> <img src="https://static.pexels.com/photos/211997/pexels-photo-211997.jpeg"/> </div> </div> </div> <div class="indicator-left"> <ol class='carousel-indicators mCustomScrollbar meartlab'> <li data-target="#carousel-custom" data-slide-to='0' class="active"><img src='https://static.pexels.com/photos/128939/pexels-photo-128939.jpeg' alt="" /></li> <li data-target="#carousel-custom" data-slide-to='1'><img src="https://static.pexels.com/photos/206470/pexels-photo-206470.jpeg" alt="" /></li> <li data-target="#carousel-custom" data-slide-to='2'><img src="https://static.pexels.com/photos/119616/pexels-photo-119616.jpeg" alt="" /></li> <li data-target="#carousel-custom" data-slide-to='3'><img src="https://static.pexels.com/photos/247287/pexels-photo-247287.jpeg" alt="" /></li> <li data-target="#carousel-custom" data-slide-to='4'><img src="https://static.pexels.com/photos/4156/fashion-woman-model-portrait.jpg" alt="" /></li> <li data-target="#carousel-custom" data-slide-to='5'><img src="https://static.pexels.com/photos/211997/pexels-photo-211997.jpeg" alt=""/></li> </ol> </div> </div> </div> </div> </div>

#carousel-custom { margin: 20px auto; } #carousel-custom .carousel-indicators { margin: 10px 0 0; overflow: auto; position: static; text-align: left; white-space:inherit; width: 100%; overflow:hidden; } #carousel-custom .carousel-indicators li { background-color: transparent; -webkit-border-radius: 0; border-radius: 0; display: inline-block; height: auto; margin: 0 !important; width: auto; } #carousel-custom .carousel-indicators li img { display: block; opacity: 0.5; } #carousel-custom .carousel-indicators li.active img { opacity: 1; } #carousel-custom .carousel-indicators li:hover img { opacity: 0.75; } #carousel-custom .carousel-outer { position: relative; } .carousel-indicators li img { height: 52px; width: 70px; } .carousel-indicators { bottom: 10px; left: 50%; list-style: outside none none; margin-left: -30%; max-width: 70px; padding-left: 0; position: absolute; text-align: center; z-index: 15; } .indicator-left{ float: right; position: absolute; right: -72px; top: -11px; } @media screen and (max-width: 400px){ .carousel-indicators li img{ height: 50px; width: 42px; } }