<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; overflow: hidden; } #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: 480px; } #thumbnail-preview-indicators .slides .slide-1 { background-image: url(https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg); } #thumbnail-preview-indicators .slides .slide-2 { background-image: url(https://s3.amazonaws.com/ooomf-com-files/tU3ptNgGSP6U2fE67Gvy_SYDNEY-162.jpg); } #thumbnail-preview-indicators .slides .slide-3 { background-image: url(https://s3.amazonaws.com/ooomf-com-files/mtNrf7oxS4uSxTzMBWfQ_DSC_0043.jpg); } #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: 100px; height: 8px; } #thumbnail-preview-indicators .carousel-indicators li > .thumbnail { position: absolute; top: 0; width: 100px; display: none; opacity: 0; left: 50%; margin-top: -80px; margin-left: -50px; } #thumbnail-preview-indicators .carousel-indicators li:hover > .thumbnail, #thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail { display: block; opacity: .8; } #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: -50px; margin-left: -25px; } }