<!-- Images Carousel Section -->
<div class="overflow-hidden">
<div class="js-slick-carousel slick slick-gutters-2"
data-hs-slick-carousel-options='{
"infinite": true,
"autoplay": true,
"slidesToShow": 2,
"centerMode": true,
"centerPadding": "200px",
"responsive": [{
"breakpoint": 992,
"settings": {
"slidesToShow": 2,
"centerPadding": "120px"
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1,
"centerPadding": "80px"
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1,
"centerPadding": "50px"
}
}]
}'>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img6.jpg);"></div>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img7.jpg);"></div>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img8.jpg);"></div>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img9.jpg);"></div>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img10.jpg);"></div>
</div>
</div>
<!-- End Images Carousel Section -->
<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 Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>