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
- Slick Carousel min CSS
- Slick Carousel theme CSS
- 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 -
- Include Jquery
- Include Slick Carousel JS
- 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.
PHP If-else-elseif and Switch-case
PHP String Functions - All necessary String functions in PHP to manage strings better.
Popular Tutorials
Popular Tutorials
Categories
-
Artificial Intelligence (AI)
11
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
14
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
Computer Engineering
3
-
CSS
28
-
Data Structure and Algorithm
18
-
Design Pattern in PHP
2
-
Design Patterns - Clean Code
1
-
E-Book
1
-
Git Commands
1
-
HTML
19
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
12
-
Laravel PHP Framework
37
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
8
-
Python
12
-
React Js
19
-
React Native
1
-
Redux
2
-
Rust Programming
15
-
SEO - Search Engine Optimization
1
-
Tailwind CSS
1
-
Typescript
10
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2
Tags
- Artificial Intelligence (AI)
- Bash Scripting
- Business
- C
- C Programming
- C-sharp programming
- C++
- Code Editor
- Computer Engineering
- CSS
- Data Structure and Algorithm
- Database
- Design pattern
- Express JS
- git
- Git Commands
- github
- HTML
- Java
- JavaScript
- Laravel
- Mathematics
- MongoDB
- Mysql
- Node JS
- PHP
- Programming
- Python
- React Js
- Redux
- Rust Programming Language
- SEO
- TypeScript
- Vue JS
- Windows terminal
- Woocommerce
- WordPress
- WordPress Plugin Development