Skip to main content

HTML:

          
            <!-- Hero Section -->
            <div class="bg-img-hero" style="background-image: url(../../assets/img/bg/bg1.png);">
              <div class="js-slick-carousel u-slick space-2"
                   data-infinite="true"
                   data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-classic--dark u-slick__arrow-centered--y rounded-circle"
                   data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
                   data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
                   data-pagi-classes="text-center u-slick__pagination mt-7 mb-0">
                <div class="js-slide">
                  <!-- Product Item -->
                  <div class="container">
                    <div class="row justify-content-lg-center align-items-lg-center">
                      <div class="col-lg-5">
                        <div class="pr-lg-4">
                          <!-- Title -->
                          <div class="mb-5">
                            <span class="d-block h2 text-primary mb-0">$99</span>
                            <h1>The Space shoes</h1>
                            <p>Our Space Design Makeup collection – to create your coolest look, then switch it up again tomorrow. Make every day, night and everything in-between as extraordinary as you are.</p>
                          </div>
                          <!-- End Title -->
                        </div>

                        <a class="btn btn-sm btn-primary btn-wide" href="single-product.html">
                          <span class="fa fa-cart-arrow-down mr-2"></span>
                          Add to Cart
                        </a>
                      </div>

                      <div class="col-lg-6">
                        <img class="img-fluid" src="../assets/img/mockups/img5.png" alt="Image Description">
                      </div>
                    </div>
                  </div>
                  <!-- End Product Item -->
                </div>

                <div class="js-slide">
                  <!-- Product Item -->
                  <div class="container">
                    <div class="row justify-content-lg-center align-items-lg-center">
                      <div class="col-lg-5">
                        <div class="pr-lg-4">
                          <!-- Title -->
                          <div class="mb-5">
                            <span class="d-block h2 text-primary mb-0">$17</span>
                            <h1>The Space mug</h1>
                            <p>Bring a casual cafe vibe to your table setting with our stoneware mugs. In four textured designs, these off-white mugs are beautiful on their own or mixed with other dinnerware for an eclectic flair.</p>
                          </div>
                          <!-- End Title -->
                        </div>

                        <a class="btn btn-sm btn-primary btn-wide" href="single-product.html">
                          <span class="fa fa-cart-arrow-down mr-2"></span>
                          Add to Cart
                        </a>
                      </div>

                      <div class="col-lg-6">
                        <img class="img-fluid" src="../assets/img/mockups/img6.png" alt="Image Description">
                      </div>
                    </div>
                  </div>
                  <!-- End Product Item -->
                </div>
                <!-- End Slick Carousel -->
              </div>
            </div>
            <!-- End Hero Section -->
          
        

CSS library:

        
          <link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
        
      

JS library and initialization:

        
          <!-- JS Implementing Plugins -->
          <script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

          <!-- JS Space -->
          <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>
        
      

Please sign in

Signin to manage your account.

Do not have an account? Signup

OR