Beautiful Product List Carousel Using Slick Carousel in Just 2 minutes
Categories - JavaScript Tags - JavaScript HTML   Maniruzzaman Akash   2 years ago   2785   3 minutes   28

Beautiful Product List Carousel Using Slick Carousel in Just 2 minutes

We'll use Slick carousel to make this beautifu Product list with beautiful slider.

 

In <head>, add slick carousel style and custom style.css

  1. Slick Carousel min CSS
  2. Slick Carousel theme CSS
  3. Custom style
<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
      integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
      integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <link rel="stylesheet" href="./style.css" />

 

In <body> add some products in a list

<div class="products">
      <div class="single-product">
        <img
          src="https://i.ibb.co/fQTGHg6/product-short-resolution-163-1632306571.png"
        />
        <h2>Realme-8 PRO 5G</h2>
        <h4>$2,000</h4>
      </div>
      <!-- Single Product -->
      <div class="single-product">
        <img
          src="https://i.ibb.co/fQTGHg6/product-short-resolution-163-1632306571.png"
        />
        <h2>Realme-8 PRO 5G</h2>
        <h4>$2,000</h4>
      </div>
      <!-- Single Product -->
      <div class="single-product">
        <img
          src="https://i.ibb.co/fQTGHg6/product-short-resolution-163-1632306571.png"
        />
        <h2>Realme-8 PRO 5G</h2>
        <h4>$2,000</h4>
      </div>
      <!-- Single Product -->
      <div class="single-product">
        <img
          src="https://i.ibb.co/fQTGHg6/product-short-resolution-163-1632306571.png"
        />
        <h2>Realme-8 PRO 5G</h2>
        <h4>$2,000</h4>
      </div>
      <!-- Single Product -->
      <div class="single-product">
        <img
          src="https://i.ibb.co/fQTGHg6/product-short-resolution-163-1632306571.png"
        />
        <h2>Realme-8 PRO 5G</h2>
        <h4>$2,000</h4>
      </div>
    </div>

 

Before finishing body, add this JS to load carousel -

  1. Include Jquery
  2. Include Slick Carousel JS
  3. Include our custom class carousel view
<script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
      integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script>
      $(document).ready(function () {
        $(".products").slick({
          infinite: true,
          loop: true,
          slidesToShow: 3,
          slidesToScroll: 3,
          dots: true
        });
      });
    </script>

 

Custom style in style.css to design a little bit of product lists

html {
  background: #ccedee;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.products {
  padding: 10px;
}

.products .single-product {
  transition: 0.4s all;
  margin: 10px;
  text-align: center;
  border: 1px solid blueviolet;
  border-radius: 10px;
  padding: 10px;
}

.products .single-product:hover img {
  scale: 100%;
}

.products .single-product img {
  width: 100%;
  scale: 80%;
}

.products .single-product h4 {
  color: blueviolet;
}

 

That's it done our simple beautiful Product list coursel design.

Live UI Test - https://31g9nh.csb.app/

Code Sandbox Link - https://codesandbox.io/s/slick-carousel-example-31g9nh?file=/style.css:0-456

 

 

 

Please check the design in code-sandbox and fork and modify as your need.

Previous
PHP If-else-elseif and Switch-case
Next
PHP String Functions - All necessary String functions in PHP to manage strings better.