MyTravel v1.0
  • Documentation
  • Live Preview
  • Introduction
  • Header Layouts
  • Banner
  • Destination
  • Icon Blocks
  • Hero
  • Tabs
  • Deal Carousel
  • Testimonials
  • Footer
  • Recent Article
  • Category
  • Deals List
  • Clients
  • Product Cards
    • Static
    • With Carousel

Deal Carousel

Deal Carousel #v1

  • RESULT
  • HTML
  • CSS
  • JS

Today's Top Deals

Image-Description
Earning Asiana Club Miles Just Got Easier!
Book Hotels and Earn Asiana Club Miles!
Image-Description
Save big on hotels!
Book and save with Trip.com on your next stay
Image-Description
Experience Europe Your Way
With up to 30% Off, experience Europe your way!
Image-Description
Earning Asiana Club Miles Just Got Easier!
Book Hotels and Earn Asiana Club Miles!
Image-Description
Save big on hotels!
Book and save with Trip.com on your next stay
Image-Description
Experience Europe Your Way
With up to 30% Off, experience Europe your way!
                                            
                                                <!-- 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>