<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 ----------> <header> <h1>Bear slideshow </h1> <p>Bear slideshow, using Bootstrap 3 Default Slidehsow (Carousel).</p> <p>click on <i class="glyphicon glyphicon-th-list"></i></p> </header> <section id="box-slider" class="col-md-7 center-block" style="float:none;"> <div class="panel panel-default"> <div class="panel-heading"> <div class="arrow"> <a class="left carousel-control" href="#slider" role="button" data-slide="next"> <i class="glyphicon glyphicon-chevron-left" aria-hidden="true"></i> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#slider" role="button" data-slide="prev"> <i class="glyphicon glyphicon-chevron-right" aria-hidden="true"></i> <span class="sr-only">Next</span> </a> </div> </div> <div id="slider" class="carousel slide" data-ride="carousel"> <div class="indicators-box"> <div id="indicatorsTitle" class="title"> <i id="btnToggleIndicators" class="glyphicon glyphicon-th-list"></i> </div> <ol class="carousel-indicators"></ol> </div> <div class="carousel-inner" role="listbox"> <div class="item"> <a href="#"><img data-name="Bear" src="https://assets.imgix.net/unsplash/bear.jpg?usm=20&auto=format%2Cenhance&fit=crop&h=300&w=800" alt=""></a> </div> <div class="item"> <a href="#"><img data-name="redleaf" src="https://assets.imgix.net/examples/redleaf.jpg?usm=20&auto=format%2Cenhance&fit=crop&h=300&w=800" alt=""></a> </div> <div class="item"> <a href="#"><img data-name="snake" src="https://assets.imgix.net/examples/snake.jpg?usm=20&auto=format%2Cenhance&fit=crop&h=300&w=800" alt=""></a> </div> <div class="item"> <a href="#"><img data-name="treefrog" src="https://assets.imgix.net/examples/treefrog.jpg?usm=20&auto=format%2Cenhance&fit=crop&h=300&w=800" alt=""></a> </div> <div class="item"> <a href="#"><img data-name="puffins" src="https://assets.imgix.net/examples/puffins.jpg?usm=20&auto=format%2Cenhance&fit=crop&h=300&w=800" alt=""></a> </div> <div class="item"> <a href="#"><img data-name="newt" src="https://assets.imgix.net/examples/newt.jpg?usm=20&auto=format%2Cenhance&fit=crop&h=300&w=800" alt=""></a> </div> <div class="item"> <a href="#"><img data-name="lorie" src="https://assets.imgix.net/examples/lorie.png?usm=20&auto=format%2Cenhance&fit=crop&h=300&w=800" alt=""></a> </div> </div> </div> </div> </section> <div class="github-star"> <iframe src="https://ghbtns.com/github-btn.html?user=alihaddadkar&repo=bear-slideshow&type=star&count=true" frameborder="0" scrolling="0" width="75px" height="20px"></iframe> </div>

body { padding: 2rem; direction: ltr; background-color: #f2f2f2; } header { text-align: center; font-family: Roboto Mono; margin-bottom: 5rem; } header h1 { margin-bottom: 2rem; } .github-star { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 3rem; } @media only screen and (max-width: 992px) { #box-slider { margin-bottom: 2rem; } } #box-slider .panel { margin: 0; position: relative; } #box-slider .panel-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #e5e5e5; padding: 2rem 1rem; } #box-slider .panel-heading .title { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.4rem; } #box-slider .panel-heading .title h4 { font: 1.4rem Roboto Mono; padding: 0 1rem; margin: 0; } #box-slider .panel-heading .title:hover { background-color: #e5e5e5; background-color: #e5e5e5; } #box-slider .carousel { position: initial; } #box-slider .indicators-box { position: absolute; width: 250px; height: 50px; top: 0; left: 0; z-index: 9999; overflow: hidden; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } #box-slider .indicators-box .title { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.4rem; padding: 1rem; } #box-slider .indicators-box .title h4 { font: 1.4rem Roboto Mono; padding: 0 1rem; margin: 0; } #box-slider .indicators-box .title:hover { background-color: #e5e5e5; } #box-slider .indicators-box .title #btnToggleIndicators { cursor: pointer; } #box-slider .indicators-box.open { background: #e6e6e6; box-shadow: -1px 0 1px 0 #b3b3b3; height: 100%; } #box-slider .carousel-indicators { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; width: 100% !important; margin: 0; top: 5.5rem; right: 0; left: initial; width: initial; bottom: initial; } #box-slider .carousel-indicators li { text-align: left; padding: 1.09rem; font-size: 1.2rem; border: 0; margin: 0; border-radius: 0; width: 100%; height: initial; text-indent: initial; border-bottom: 1px #d1d1d1 solid; position: relative; } #box-slider .carousel-indicators li:after { content: ""; position: absolute; top: 103%; right: 0; width: 100%; height: 1px; background-color: #fff; } #box-slider .carousel-indicators li:last-of-type { border-bottom: 0; } #box-slider .carousel-indicators li:last-of-type:after { content: initial; } #box-slider .carousel-indicators li.active { background-color: #765438; color: #fff; } #box-slider .arrow { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } #box-slider .arrow .carousel-control { position: initial; box-shadow: 0 0 0 0 transparent; text-shadow: 0 0 0 transparent; background: none; width: initial; color: #434144; opacity: 1; font-size: 1rem; padding: 0 0.3rem; } #box-slider .arrow .carousel-control i { font-size: 1rem; height: initial; width: initial; } #box-slider .carousel { height: 291px; overflow: hidden; } @media only screen and (max-width: 1200px) { #box-slider .carousel { height: initial; } } #box-slider .carousel-inner, #box-slider .item { width: 100%; height: 100%; } #box-slider .carousel-inner img, #box-slider .item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (max-width: 992px) { #box-slider .carousel-inner, #box-slider .item { height: initial; } #box-slider .carousel-inner img, #box-slider .item img { height: initial; } }

$(document).ready(function() { $('#box-slider').each(function() { var self = $(this), get_item = $('#box-slider .item'), get_item_length = get_item.length, indicators = $('#box-slider .carousel-indicators'), index = "0"; for (index; index < get_item_length; index++) { indicators.append('<li data-target="#slider" data-slide-to=" ' + index + ' "></li>'); } indicators.find('li:first').addClass('active'); get_item.first().addClass('active'); get_item.each(function(i) { get_item_name = $(this).find('img').data('name'); indicators.find('li:eq(' + i + ')').html(get_item_name); }); self.each(function() { var slideIndex = $(this).find('li.active').text(); $('#indicatorsTitle').append('<h4>' + slideIndex + '</h4>'); self.on('slid.bs.carousel', function() { slideIndex = $(this).find('li.active').text(); $('#indicatorsTitle h4').html(slideIndex); }); }); $('#btnToggleIndicators').on('click', function() { $('.indicators-box').toggleClass('open'); }); $('#box-slider .carousel-indicators li').on('click', function() { $('.indicators-box').removeClass('open'); }); }); });