In this Article, we will learn how to integrate Slick slider in Magento 2. The Slick slider is most popular carousel slider plugin to list products and images. You can integrate slick slider with your featured products, new products, sale product, Best Selling products, etc.
Now, we will start to learn step-by-step.
Step 1: First, you need to create custom module in magento 2 with required files.
Step 2: Then, we need to create template file with below code in app/code/Mageclues/SlickSlider/view/frontend/templates/slider.phtml file. If you want to add product slider than just replace image tag with product div/li tag.
<!DOCTYPE html>
<html>
<body>
<div class="slick-slider">
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
</div>
</body>
</html>Step 3: Then, you need to put slick js code in app/code/Mageclues/SlickSlider/view/frontend/web/js/slider.js file.
require(['jquery', 'jquery/ui', 'slick'], function($) {
$(document).ready(function() {
$(".slick-slider").slick({
dots: true,
infinite: false,
slidesToShow: 4,
slidesToScroll: 1
});
});
});Step 4: Now, you need to configure slider.js file and slider.phtml in app/code/Mageclues/SlickSlider/view/frontend/layout/slickslider_index_index.xml layout file. If you want to put slider in your Home page or any other page in website then put below code in your page layout file and no need to create layout file(slickslider_index_index.xml)
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
layout="1column"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="Mageclues_SlickSlider::js/slider.js" async="async" />
</head>
<body>
<referenceBlock name="content">
<block class="Magento\Framework\View\Element\Template"
name="slick.slider.demo"
template="Mageclues_SlickSlider::slider.phtml" />
</referenceBlock>
</body>
</page>Step 5: You need to put slick slider in your app/code/Mageclues/SlickSlider/view/frontend/requirejs-config.js file and paste this below code in file.
var config = {
paths: {
slick: 'Mageclues_SlickSlider/js/slick'
},
shim: {
slick: {
deps: ['jquery']
}
}
};You need to put slick css and js file in your module web folder. You can use this code in your other phtml file or other layout where you want to call this slider.
I hope this article is helpful for you. please left comment if you have any query about Slick slider integration.
Thank You ):
