Deal Carousel
Deal Carousel #v1
Today's Top Deals
<!-- Deal Carousel -->
<div class="container space-1 mt-3">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Today's Top Deals</h2>
</div>
<div class="js-slick-carousel u-slick u-slick--gutters-3" data-slides-show="3" data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-classic--v2 u-slick__arrow-centered--y rounded-circle" data-arrow-left-classes="flaticon-back u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left" data-arrow-right-classes="flaticon-next u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right" data-pagi-classes="d-lg-none text-center u-slick__pagination mt-4"
data-responsive='[{
"breakpoint": 1025,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide mb-4">
<a class="d-block rounded-xs overflow-hidden mb-3" href="#">
<img class="img-fluid w-100" src="../../assets/img/410x300/img1.jpg" alt="Image-Description">
</a>
<h6 class="font-size-17 pt-xl-1 font-weight-bold font-weight-bold mb-1 text-gray-6">
<a href="#">Earning Asiana Club Miles Just Got Easier!</a>
</h6>
<a class="text-gray-1" href="#">
<span>Book Hotels and Earn Asiana Club Miles!</span>
</a>
</div>
<div class="js-slide mb-4">
<a class="d-block rounded-xs overflow-hidden mb-3" href="#">
<img class="img-fluid w-100" src="../../assets/img/410x300/img2.jpg" alt="Image-Description">
</a>
<h6 class="font-size-17 pt-xl-1 font-weight-bold font-weight-bold mb-1 text-gray-6">
<a href="#">Save big on hotels!</a>
</h6>
<a class="text-gray-1" href="#">
<span>Book and save with Trip.com on your next stay</span>
</a>
</div>
<div class="js-slide mb-4">
<a class="d-block rounded-xs overflow-hidden mb-3" href="#">
<img class="img-fluid w-100" src="../../assets/img/410x300/img3.jpg" alt="Image-Description">
</a>
<h6 class="font-size-17 pt-xl-1 font-weight-bold font-weight-bold mb-1 text-gray-6">
<a href="#">Experience Europe Your Way</a>
</h6>
<a class="text-gray-1" href="#">
<span>With up to 30% Off, experience Europe your way!</span>
</a>
</div>
<div class="js-slide mb-4">
<a class="d-block rounded-xs overflow-hidden mb-3" href="#">
<img class="img-fluid w-100" src="../../assets/img/410x300/img1.jpg" alt="Image-Description">
</a>
<h6 class="font-size-17 pt-xl-1 font-weight-bold font-weight-bold mb-1 text-gray-6">
<a href="#">Earning Asiana Club Miles Just Got Easier!</a>
</h6>
<a class="text-gray-1" href="#">
<span>Book Hotels and Earn Asiana Club Miles!</span>
</a>
</div>
<div class="js-slide mb-4">
<a class="d-block rounded-xs overflow-hidden mb-3" href="#">
<img class="img-fluid w-100" src="../../assets/img/410x300/img2.jpg" alt="Image-Description">
</a>
<h6 class="font-size-17 pt-xl-1 font-weight-bold font-weight-bold mb-1 text-gray-6">
<a href="#">Save big on hotels!</a>
</h6>
<a class="text-gray-1" href="#">
<span>Book and save with Trip.com on your next stay</span>
</a>
</div>
<div class="js-slide mb-4">
<a class="d-block rounded-xs overflow-hidden mb-3" href="#">
<img class="img-fluid w-100" src="../../assets/img/410x300/img3.jpg" alt="Image-Description">
</a>
<h6 class="font-size-17 pt-xl-1 font-weight-bold font-weight-bold mb-1 text-gray-6">
<a href="#">Experience Europe Your Way</a>
</h6>
<a class="text-gray-1" href="#">
<span>With up to 30% Off, experience Europe your way!</span>
</a>
</div>
</div>
</div>
<!-- End Deal Carousel -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS MyTravel -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>