"Bootstrap carousel slideshow with thumbnails"
Bootstrap 4.1.1 Snippet by VietPublic

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <h2>Bootstrap carousel slideshow with thumbnails</h2> <div class="carousel slide article-slide" id="vpCarousel" data-interval="2000" data-ride="carousel"> <div class="carousel-inner cont-slider"> <div class="item active"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep01.png" width="1070" height="450" alt="Chất liệu vải mềm vại, dễ vào nếp, độ cản nắng ở mức 75%"> <div class="carousel-caption"> <h2>RÈM THÔNG TẦNG SỬ DỤNG ĐỘNG CƠ</h2> <p>Chất liệu vải mềm vại, dễ vào nếp, độ cản nắng ở mức 75%.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep02.png" width="1070" height="450" alt="Chất liệu vải gấm lỳ, lên múi rèm mềm mại, cản nắng 100%"> <div class="carousel-caption"> <h2>RÈM CỬA GẤM LỲ, MÀU COBAN CÁ TÍNH</h2> <p>Chất liệu vải gấm lỳ, lên múi rèm mềm mại, cản nắng 100%.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep03.png" width="1070" height="450" alt="Vẫn mang chất liệu gấm lỳ, với mức cản nắng tuyệt đối, đi kèm voan mưa, mềm mại"> <div class="carousel-caption"> <h2>RÈM CỬA 2 LỚP GẤM LỲ VÀ VOAN MƯA HẠT LỚN</h2> <p>Vẫn mang chất liệu gấm lỳ, với mức cản nắng tuyệt đối, đi kèm voan mưa, mềm mại.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep04.png" width="1070" height="450" alt="Chất liệu vải rèm thô bố, có những nét dệt nổi gân, mang chút phong cách đũi, đem lại vẻ đẹp luôn luôn hiện đại"> <div class="carousel-caption"> <h2>RÈM CỬA THÔ BỐ</h2> <p>Chất liệu vải rèm thô bố, có những nét dệt nổi gân, mang chút phong cách đũi, đem lại vẻ đẹp luôn luôn hiện đại.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep05.png" width="1070" height="450" alt="Bạn không thể nhận ra đây là một chất liệu vải có giá thành cực rẻ, tuyệt vời hơn nữa là nó có thể cản nắng đến 95%"> <div class="carousel-caption"> <h2>RÈM GẤM LỲ GIÁ RẺ</h2> <p>Bạn không thể nhận ra đây là một chất liệu vải có giá thành cực rẻ, tuyệt vời hơn nữa là nó có thể cản nắng đến 95%.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep06.png" width="1070" height="450" alt="Chất liệu vải gấm lỳ loại giá rẻ, vẫn mang lại mức cản nắng tuyệt vời, đi kèm với voan lụa, một loại voan có sự mềm mại nhất"> <div class="carousel-caption"> <h2>RÈM CỬA 2 LỚP GIÁ RẺ</h2> <p>Chất liệu vải gấm lỳ loại giá rẻ, vẫn mang lại mức cản nắng tuyệt vời, đi kèm với voan lụa, một loại voan có sự mềm mại nhất.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep07.png" width="1070" height="450" alt="Chất liệu vải gấn lỳ, có mức cản nắng đến 100% và giá thành rất rẻ"> <div class="carousel-caption"> <h2>RÈM CỬA CẢN NẮNG 100%</h2> <p>Chất liệu vải gấn lỳ, có mức cản nắng đến 100% và giá thành rất rẻ.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep08.png" width="1070" height="450" alt="Chất liệu vải nền gấm mặt nhung, sự mềm mại là tuyệt vời, mức cản nắng là 80%"> <div class="carousel-caption"> <h2>RÈM CỬA VẢI MẶT NHUNG</h2> <p>Chất liệu vải nền gấm mặt nhung, sự mềm mại là tuyệt vời, mức cản nắng là 80%.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep09.png" width="1070" height="450" alt="Chất liệu vải gấm lỳ, mức giá rất rẻ, độ cản nắng rất tốt, đến 100%"> <div class="carousel-caption"> <h2>RÈM CỬA CẢN NẮNG GIÁ RẺ</h2> <p>Chất liệu vải gấm lỳ, mức giá rất rẻ, độ cản nắng rất tốt, đến 100%.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep10.png" width="1070" height="450" alt="Chất liệu vải gấm lỳ, mức giá rất rẻ, độ cản nắng rất tốt, đến 100%"> <div class="carousel-caption"> <h2>RÈM CỬA CẢN NẮNG GIÁ RẺ</h2> <p>Chất liệu vải gấm lỳ, mức giá rất rẻ, độ cản nắng rất tốt, đến 100%.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep11.png" width="1070" height="450" alt="Chất liệu vải gấm lỳ, mức giá rất rẻ, độ cản nắng rất tốt, đến 100%"> <div class="carousel-caption"> <h2>RÈM CỬA CẢN NẮNG GIÁ RẺ</h2> <p>Chất liệu vải gấm lỳ, mức giá rất rẻ, độ cản nắng rất tốt, đến 100%.</p> </div> </div> <div class="item"> <img src="https://rembormn.com/images/rembormn/slideshow/rem-cua-dep12.png" width="1070" height="450" alt="Chất liệu vải gấm lỳ, mức giá rất rẻ, độ cản nắng rất tốt, đến 100%"> <div class="carousel-caption"> <h2>RÈM CỬA CẢN NẮNG GIÁ RẺ</h2> <p>Chất liệu vải gấm lỳ, mức giá rất rẻ, độ cản nắng rất tốt, đến 100%.</p> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#vpCarousel" role="button" data-slide="prev"> <i class="fa fa-chevron-left"></i><span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#vpCarousel" role="button" data-slide="next"> <i class="fa fa-chevron-right"></i><span class="sr-only">Next</span> </a> </div> <!-- Indicators --> <ol class="carousel-indicators visible-lg visible-md"> <li class="active" data-slide-to="0" data-target="#vpCarousel"> <img alt="RÈM THÔNG TẦNG SỬ DỤNG ĐỘNG CƠ" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb01.png" width="76" height="40"> </li> <li class="" data-slide-to="1" data-target="#vpCarousel"> <img alt="RÈM CỬA GẤM LỲ, MÀU COBAN CÁ TÍNH" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb02.png" width="76" height="40"> </li> <li class="" data-slide-to="2" data-target="#vpCarousel"> <img alt="RÈM CỬA 2 LỚP GẤM LỲ VÀ VOAN MƯA HẠT LỚN" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb03.png" width="76" height="40"> </li> <li class="" data-slide-to="3" data-target="#vpCarousel"> <img alt="RÈM CỬA THÔ BỐ" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb04.png" width="76" height="40"> </li> <li class="" data-slide-to="4" data-target="#vpCarousel"> <img alt="RÈM GẤM LỲ GIÁ RẺ" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb05.png" width="76" height="40"> </li> <li class="" data-slide-to="5" data-target="#vpCarousel"> <img alt="RÈM CỬA 2 LỚP GIÁ RẺ" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb06.png" width="76" height="40"> </li> <li class="" data-slide-to="6" data-target="#vpCarousel"> <img alt="RÈM CỬA CẢN NẮNG 100%" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb07.png" width="76" height="40"> </li> <li class="" data-slide-to="7" data-target="#vpCarousel"> <img alt="RÈM CỬA VẢI MẶT NHUNG" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb08.png" width="76" height="40"> </li> <li class="" data-slide-to="8" data-target="#vpCarousel"> <img alt="RÈM CỬA CẢN NẮNG GIÁ RẺ" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb09.png" width="76" height="40"> </li> <li class="" data-slide-to="9" data-target="#vpCarousel"> <img alt="RÈM CỬA CẢN NẮNG GIÁ RẺ" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb10.png" width="76" height="40"> </li> <li class="" data-slide-to="10" data-target="#vpCarousel"> <img alt="RÈM CỬA CẢN NẮNG GIÁ RẺ" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb11.png" width="76" height="40"> </li> <li class="" data-slide-to="11" data-target="#vpCarousel"> <img alt="RÈM CỬA CẢN NẮNG GIÁ RẺ" title="" src="https://rembormn.com/images/rembormn/slideshow/rem-dep-thumb12.png" width="76" height="40"> </li> </ol> </div> </div> </div>
#vpCarousel .carousel-caption h2 { background-color: rgba(192,192,192,0.2); padding: 10px 0; color:darkred; } #vpCarousel .carousel-caption p { background-color: rgba(192,192,192,0.3); padding: 10px 0; color:darkgreen; } #vpCarousel .carousel-control.left { background-image: none; width: 54px; height: 54px; top: 50%; left: 20px; margin-top: -27px; line-height: 54px; border: 2px solid #fff; opacity: 1; text-shadow: none; -webkit-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } #vpCarousel .carousel-control.right { background-image: none; width: 54px; height: 54px; top: 50%; right: 20px; margin-top: -27px; line-height: 54px; border: 2px solid #fff; opacity: 1; text-shadow: none; -webkit-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } #vpCarousel .carousel-indicators { bottom: 0; left: 10px; margin-left: 5px; width: 100%; } #vpCarousel .carousel-indicators li { border: medium none; border-radius: 0; float: left; height: 40px; margin-bottom: 5px; margin-left: 0; margin-right: 5px !important; margin-top: 0; width: 76px; } #vpCarousel .carousel-indicators img { border: 2px solid #FFFFFF; float: left; height: 40px; left: 0; width: 76px; opacity: 0.7; } #vpCarousel .carousel-indicators .active img { border: 2px solid #39b3d7; opacity: 1; } #vpCarousel .carousel-indicators li:hover img { opacity: 0.85; }

Related: See More


Questions / Comments: