<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="//code.jquery.com/jquery-1.11.1.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;
}
