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

/* ----------------------------------- Code snippet by @maridlcrmn Credits images: www.unsplash.com ----------------------------------- */ #thumbnail-preview-indicators { position: relative; } #thumbnail-preview-indicators .slides .slide-1, #thumbnail-preview-indicators .slides .slide-2, #thumbnail-preview-indicators .slides .slide-3 { background-size: cover; background-position: center center; background-repeat: no-repeat; } #thumbnail-preview-indicators, #thumbnail-preview-indicators .slides, #thumbnail-preview-indicators .slides .slide-1, #thumbnail-preview-indicators .slides .slide-2, #thumbnail-preview-indicators .slides .slide-3 { height:240px; width: 320px; } #thumbnail-preview-indicators .slides .slide-1 { background-image: url(http://placehold.it/250x180); } #thumbnail-preview-indicators .slides .slide-2 { background-image: url(http://placehold.it/250x180); } #thumbnail-preview-indicators .slides .slide-3 { background-image: url(http://placehold.it/250x180); } #thumbnail-preview-indicators .carousel-inner .item .carousel-caption { top: 20%; bottom: inherit; } #thumbnail-preview-indicators .carousel-indicators li, #thumbnail-preview-indicators .carousel-indicators li.active { position: relative; width: 60px; height: 8px; } #thumbnail-preview-indicators .carousel-indicators li > .thumbnail { position: absolute; top: 0; width: 100px; display: none; opacity: 0; left: 50%; margin-top: 10px; margin-left: -50px; } #thumbnail-preview-indicators .carousel-indicators li:hover > .thumbnail{ display: block; opacity: .8; } #thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail { display: none; } #thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail:hover{ opacity: 1; } @media screen and (max-width : 480px) { #thumbnail-preview-indicators .carousel-indicators li, #thumbnail-preview-indicators .carousel-indicators li.active { width: 50px; height: 8px; position: relative; } #thumbnail-preview-indicators .carousel-indicators li > .thumbnail { width: 50px; left: 50%; margin-top: -20px; margin-left: -25px; } } .carousel-indicators{ bottom: 0px !important; }