Bước 1: Tạo cấu trúc HTML
<header>
<div class="container">
<h1>Flexible Bootstrap Carousel</h1>
</div>
</header>
<section class="examples">
<div class="container">
<div class="carousel-example">
<h2>Bài viết mới</h2>
<div id="simple-content-carousel" class="carousel flexible default slide" data-ride="carousel" data-interval="5000" data-wrap="true">
<div class="items">
<div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item1.jpg" alt="">
</div>
<div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item2.jpg" alt="">
</div>
<div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item3.jpg" alt="">
</div>
<div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item4.jpg" alt="">
</div>
<div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item5.jpg" alt="">
</div>
<div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item6.jpg" alt="">
</div>
</div>
<div class="carousel-inner" role="listbox"><div class="item active"><div class="row"><div class="col-xs-4 left"><div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item1.jpg" alt="">
</div></div><div class="col-xs-4 center"><div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item2.jpg" alt="">
</div></div><div class="col-xs-4 right"><div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item3.jpg" alt="">
</div></div></div></div><div class="item"><div class="row"><div class="col-xs-4 left"><div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item4.jpg" alt="">
</div></div><div class="col-xs-4 center"><div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item5.jpg" alt="">
</div></div><div class="col-xs-4 right"><div class="flex-item">
<img class="img-responsive" src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/item6.jpg" alt="">
</div></div></div></div></div>
<a class="left carousel-control" href="https://dongthoigian.net/#simple-content-carousel" role="button" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="https://dongthoigian.net/#simple-content-carousel" role="button" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> </a>
</div>
</div>
<div class="carousel-example">
<h2>Sản phẩm mới</h2>
<div id="complicated-content-carousel" class="carousel flexible default slide" data-ride="carousel" data-interval="false" data-wrap="false">
<div class="items">
<div class="flex-item">
<div class="good-top">
<div class="good-top-left">
<div class="size">
<div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span>
</div>
<div class="options" style="display: none;">
<div class="option">S</div>
<div class="option">M</div>
<div class="option">L</div>
<div class="option">XL</div>
</div>
</div>
</div>
<div class="good-top-right">
<div class="choose-color">
<div class="blue"></div>
<div class="yellow"></div>
<div class="black"></div>
</div>
</div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/good1/black.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="http://hocwebgiare.com/"><h4>T-shirt</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">5,00$</p>
</div>
</div>
</div>
<div class="flex-item">
<div class="good-top">
<div class="good-top-left">
<div class="size">
<div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span>
</div>
<div class="options" style="display: none;">
<div class="option">S</div>
<div class="option">M</div>
<div class="option">L</div>
<div class="option">XL</div>
</div>
</div>
</div>
<div class="good-top-right"> </div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/jeans.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="https://dongthoigian.net/"><h4>Jeans for men</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">30,00$</p>
</div>
</div>
</div>
<div class="flex-item">
<div class="good-top">
<div class="good-top-left">10 litres </div>
<div class="good-top-right"> </div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/good3.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="https://dongthoigian.net/"><h4>Backpack</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">60,00$</p>
</div>
</div>
</div>
<div class="flex-item">
<div class="good-top">
<div class="good-top-left">
<div class="size">
<div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span>
</div>
<div class="options" style="display: none;">
<div class="option">S</div>
<div class="option">M</div>
<div class="option">L</div>
<div class="option">XL</div>
</div>
</div>
</div>
<div class="good-top-right">
<div class="choose-color">
<div class="dark-blue-women"></div>
<div class="light-blue-women"></div>
</div>
</div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/jeans-girls/dark-blue-women.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="https://dongthoigian.net/"><h4>Jeans for women</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">50,00$</p>
</div>
</div>
</div>
<div class="flex-item">
<div class="good-top">
<div class="good-top-left">
<div class="size">
<div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span>
</div>
<div class="options" style="display: none;">
<div class="option">S</div>
<div class="option">M</div>
<div class="option">L</div>
<div class="option">XL</div>
</div>
</div>
</div>
<div class="good-top-right">
</div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/shirt-women.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="https://dongthoigian.net/"><h4>Women's shirt</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">30,00$</p>
</div>
</div>
</div>
<div class="flex-item">
<div class="good-top">
<div class="good-top-left"> 2 litres </div>
<div class="good-top-right"> </div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/womens-bag.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="https://dongthoigian.net/"><h4>Shoulder bag</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">60,00$</p>
</div>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox"><div class="item active"><div class="row"><div class="col-xs-4 left"><div class="flex-item">
<div class="good-top">
<div class="good-top-left">
<div class="size">
<div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span>
</div>
<div class="options" style="display: none;">
<div class="option">S</div>
<div class="option">M</div>
<div class="option">L</div>
<div class="option">XL</div>
</div>
</div>
</div>
<div class="good-top-right">
<div class="choose-color">
<div class="blue"></div>
<div class="yellow"></div>
<div class="black"></div>
</div>
</div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/good1/black.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="https://dongthoigian.net/"><h4>T-shirt</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">5,00$</p>
</div>
</div>
</div></div><div class="col-xs-4 center"><div class="flex-item">
<div class="good-top">
<div class="good-top-left">
<div class="size">
<div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span>
</div>
<div class="options" style="display: none;">
<div class="option">S</div>
<div class="option">M</div>
<div class="option">L</div>
<div class="option">XL</div>
</div>
</div>
</div>
<div class="good-top-right"> </div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/jeans.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="https://dongthoigian.net/"><h4>Jeans for men</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">30,00$</p>
</div>
</div>
</div></div><div class="col-xs-4 right"><div class="flex-item">
<div class="good-top">
<div class="good-top-left"> 10 litres </div>
<div class="good-top-right"> </div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/good3.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="http://dongthoigian.net/"><h4>Backpack</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">60,00$</p>
</div>
</div>
</div></div></div></div><div class="item"><div class="row"><div class="col-xs-4 left"><div class="flex-item">
<div class="good-top">
<div class="good-top-left">
<div class="size">
<div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span>
</div>
<div class="options" style="display: none;">
<div class="option">S</div>
<div class="option">M</div>
<div class="option">L</div>
<div class="option">XL</div>
</div>
</div>
</div>
<div class="good-top-right">
<div class="choose-color">
<div class="dark-blue-women"></div>
<div class="light-blue-women"></div>
</div>
</div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/jeans-girls/dark-blue-women.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="https://dongthoigian.net/"><h4>Jeans for women</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">50,00$</p>
</div>
</div>
</div></div><div class="col-xs-4 center"><div class="flex-item">
<div class="good-top">
<div class="good-top-left">
<div class="size">
<div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span>
</div>
<div class="options" style="display: none;">
<div class="option">S</div>
<div class="option">M</div>
<div class="option">L</div>
<div class="option">XL</div>
</div>
</div>
</div>
<div class="good-top-right"> </div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/shirt-women.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="https://dongthoigian.net/"><h4>Women's shirt</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">30,00$</p>
</div>
</div>
</div></div><div class="col-xs-4 right"><div class="flex-item">
<div class="good-top">
<div class="good-top-left"> 2 litres </div>
<div class="good-top-right"> </div>
</div>
<div class="good-image">
<img src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/images/womens-bag.png" alt="">
</div>
<div class="good-bottom">
<div class="good-bottom-left">
<a href="http://dongthoigian.net/"><h4>Shoulder bag</h4></a>
</div>
<div class="good-bottom-right">
<p class="price">60,00$</p>
</div>
</div>
</div></div></div></div></div>
<div class="index">1 / 2</div>
<a class="left carousel-control" href="https://dongthoigian.net/#complicated-content-carousel" role="button" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="https://dongthoigian.net/#complicated-content-carousel" role="button" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span></a>
</div>
</div>
</div>
</section> Bước 2: Tạo cấu trúc CSS
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
background-color: #fff;
}
h1 {
margin-top: 40px;
font-family: 'Caveat Brush', cursive;
font-size: 70px;
text-align: center;
}
h2 {
margin-bottom: 25px;
max-width: 80%;
font-size: 32px;
font-weight: 500;
}
.link { margin-top: 40px; }
p { font-size: 20px; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
a { }
.carousel-example { padding: 20px 0 50px 0; }
.carousel.flexible .items { display: none; }
#complicated-content-carousel .carousel-control {
position: absolute;
top: -20px;
right: 0;
left: auto;
bottom: auto;
width: 14px;
font-size: 25px;
color: #3c3c3c !important;
opacity: 1;
}
#complicated-content-carousel .carousel-control.left, #complicated-content-carousel .carousel-control.right { background-image: none; }
#complicated-content-carousel .carousel-control.left { right: 35px; }
#complicated-content-carousel .index {
position: absolute;
top: -70px;
right: 0;
font-size: 16px;
color: #3c3c3c;
}
#complicated-content-carousel .flex-item {
position: relative;
display: inline-block;
width: 320px;
height: 380px;
padding: 16px 13px;
background-color: #f5f6f7;
border: 6px solid #f5f6f7;
}
#complicated-content-carousel .flex-item:hover, #complicated-content-carousel .flex-item:focus {
border: 6px solid #d2d4d5;
border-radius: 3px;
}
.good-top { height: 21px; }
.good-top-left {
font-size: 16px;
color: #424242;
text-transform: uppercase;
line-height: 21px;
}
.good-top-right {
height: 21px;
text-align: right;
}
.choose-color div {
display: inline-block;
width: 21px;
height: 21px;
border-radius: 50%;
letter-spacing: 5px;
cursor: pointer;
}
.choose-color .blue { background-color: #165eb9; }
.choose-color .yellow { background-color: #ffe637; }
.choose-color .black { background-color: #535253; }
.choose-color .grey { background-color: #d3a7ac; }
.choose-color .dark-blue { background-color: #35374c; }
.choose-color .dark-blue-women { background-color: #192b5e; }
.choose-color .light-blue-women { background-color: #1682c4; }
.good-top-left .fa { position: relative; top: 2px; font-size: 21px; }
.good-bottom { height: 21px; }
.good-bottom * { margin-top: 0; margin-bottom: 0; }
.good-bottom-left a h4 {
font-size: 18px;
color: #3c3c3c;
text-transform: uppercase;
line-height: 21px;
}
.good-bottom-right {
position: relative;
top: -1px;
font-size: 22px;
color: #424242;
text-transform: uppercase;
line-height: 21px;
}
.good-top-left, .good-bottom-left {
float: left; text-align: left; }
.good-top-right, .good-bottom-right {
float: right;
text-align: right;
}
.good-image {
height: 294px;
text-align: center;
}
.good-image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.good-image img {
max-height: 240px;
vertical-align: middle;
}
.size { position: absolute;
padding: 0;
cursor: pointer;
transition: all .35s;
}
.size.shown {
padding: 0 5px 5px 5px;
background-color: #fff;
border-radius: 2px;
}
.size.shown .option:hover { background-color: #f5f6f7; }
.carousel-control {
width: 50px;
height: 50px;
top: 50%;
transform: translateY(-50%);
bottom: auto;
font-size: 30px;
text-align: center;
opacity: 1;
}
a.carousel-control.left, a.carousel-control.right {
background-image: none;
opacity: 1;
text-align: center;
}
@media only screen and (max-width: 350px) {
#complicated-content-carousel .flex-item { width: 300px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
#complicated-content-carousel .flex-item { width: 300px; } }
.carousel.flexible .items { display: none;}
.carousel.flexible .carousel-inner .item-inner-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
flex-grow: 0;
flex-shrink: 0;
}
.carousel.flexible .carousel-inner .item .item-inner { padding: 0 10px;}
.carousel.flexible .carousel-inner .item .item-inner:first-of-type { padding-left: 0;}
.carousel.flexible .carousel-inner .item .item-inner:last-of-type { padding-right: 0;}Bước 3: Gọi thư viện Bootstrap và Font awesome
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>Bước 4: Gọi thư viện JQUERY
<script src="js/jquery-1.11.1.min.js"></script>Bước 5: Tạo hiệu ứng Slide bằng JQUERY
<script src="https://dongthoigian.net/thiet_ke_web_chuan_demo/flexible_bootstrap_carousel/js/flexible-bootstrap-carousel.min.js"></script> <script>
$(window).load(function() {
preloadImagesForCarousel();
$(".carousel").on("aCarouselHasBeenAdjusted", function() {
sizeChoosing();
chooseColor();
adjustIndexesOfCarousel();
});
$(".carousel.flexible.custom").flexCarousel({
"320-500": 1,
"501-768": 2,
"769-991": 4,
"992-20000": 5
});
$(".carousel.flexible.default").flexCarousel();});
function sizeChoosing() {
$(".size .options").hide();
$(".carousel").off("click").on("click", ".size", function() {
$(this).clearQueue();
if ($(this).hasClass("shown")) {
$(this).clearQueue().removeClass("shown").find(".options").slideUp(800); }
else {
$(this).clearQueue().addClass("shown").find(".options").slideDown(800);
} });
$(".carousel").on("click", ".option", function() {
$(this).closest(".size").find(".header .number").html($(this).text());
});}
function chooseColor() {
$(".carousel").on("click", ".choose-color div", function() {
var img_path = findPathToDirectory($(this).closest(".flex-item").find(".good-image img").attr("src")) + $(this).attr("class") + ".png"; $(this).closest(".flex-item").find(".good-image img").stop().fadeTo("slow", 0, function() {
$(this).attr("src", img_path); }).fadeTo("slow", 1);
});}
function findPathToDirectory(path_to_file) {
return path_to_file.slice(0, path_to_file.lastIndexOf("/") + 1);
}
function adjustIndexesOfCarousel() {
$(".carousel").each(function() {
setupIndexesOfCarousel($(this)); });
$(".carousel").on("slid.bs.carousel", function() {
setupIndexesOfCarousel($(this));
});}
function setupIndexesOfCarousel(carousel) {
var total_number = $(carousel).find(".item").length;
var current_number = $(carousel).find(".item.active").index() + 1;
$(carousel).find(".index").text(String(current_number) + " / " + String(total_number))
;}
function preloadImages(images) {
for (var i = 0; i < images.length; i++) {
$("<img />").attr("src", images[i]);
}}
function collectImagesForPreloading() {
var images = []; $(".carousel .choose-color").each(function() {
var files = []; $(this).find("div").each(function() {
files.push($(this).attr("class"));
});
var directory = findPathToDirectory($(this).closest(".flex-item").find(".good-image img").attr("src"));
for (var i = 0; i < files.length; i++) {
images.push(directory + files[i] + ".png");
}
});
return images;
}
function preloadImagesForCarousel() {
var images = collectImagesForPreloading();
preloadImages(images);}
</script>