We will learn here, how to use Slick Slider in Magento 2 step by step.
We can create new module in app/code/ directory..
- In Magento 2, module name divided into two parts i.e Vendor_Module (for e.g Magento_Theme, Magento_Catalog)
- We will create
Mage2sk_SlickSliderhere, SoMage2skis vendor name andSlickSlideris name of this module. - So first create your namespace directory (
Mage2sk) and move into that directory. - Then create module name directory (
SlickSlider)
Now Go to : app/code/Mage2sk/SlickSlider
- Magento 2 looks for configuration information for each module in that module’s etc directory. so we need to add module.xml file here in our module
app/code/Mage2sk/SlickSlider/etc/module.xmland it's content for our module is :
<?xml version="1.0"?>
<!--
/**
* Mage2sk Use Slick slider in Magento 2
*
* @package Mage2sk_SlickSlider
* @author Kishan Savaliya <kishansavaliyakb@gmail.com>
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Mage2sk_SlickSlider" setup_version="1.0.0" />
</config>In this file, we register a module with name Mage2sk_SlickSlider and the version is 1.0.0.
- All Magento 2 module must be registered in the Magento system through the magento
ComponentRegistrarclass. This file will be placed in module's root directory.
In this step, we need to create this file:
app/code/Mage2sk/SlickSlider/registration.php
And it’s content for our module is:
<?php
/**
* Mage2sk Use Slick slider in Magento 2
*
* @package Mage2sk_SlickSlider
* @author Kishan Savaliya <kishansavaliyakb@gmail.com>
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Mage2sk_SlickSlider',
__DIR__
);- By finish above step, you have created an empty module. Now we will enable it in Magento environment.
- Before enable the module, we must check to make sure Magento has recognize our module or not by enter the following at the command line:
php bin/magento module:status
If you follow above step, you will see this in the result:
List of disabled modules:
Mage2sk_SlickSlider
This means the module has recognized by the system but it is still disabled. Run this command to enable it:
php bin/magento module:enable Mage2sk_SlickSlider
The module has enabled successfully if you saw this result:
The following modules has been enabled:
- Mage2sk_SlickSlider
This’s the first time you enable this module so Magento require to check and upgrade module database. We need to run this command:
php bin/magento setup:upgrade
Create requirejs-config.js this file here in module..
app/code/Mage2sk/SlickSlider/view/frontend/requirejs-config.js
Content for this file is ..
var config = {
paths: {
slick: 'Mage2sk_SlickSlider/js/slick'
},
shim: {
slick: {
deps: ['jquery']
}
}
};
You can download latest version of slick here
Download that and extract .zip file and copy slick.js and slick.min.js files from there and paste that here..
app/code/Mage2sk/SlickSlider/view/frontend/web/js/slick.js
and
app/code/Mage2sk/SlickSlider/view/frontend/web/js/slick.min.js
Copy .less files from downloaded directory to below mentioned path..
app/code/Mage2sk/SlickSlider/view/frontend/web/css/source/slick.less
and
app/code/Mage2sk/SlickSlider/view/frontend/web/css/source/slick-theme.less
Now create _module.less file here..
app/code/Mage2sk/SlickSlider/view/frontend/web/css/source/_module.less
This is important file to run slick slider properly in Magento 2 without any issues.
Content for this file is..
@import 'slick.less';
@import 'slick-theme.less';
- We will display all sliders in one custom action in this module.
- Create
routes.xmlfile here..
app/code/Mage2sk/SlickSlider/etc/frontend/routes.xml
Content for this file is ..
<?xml version="1.0"?>
<!--
/**
* Mage2sk Use Slick slider in Magento 2
*
* @package Mage2sk_SlickSlider
* @author Kishan Savaliya <kishansavaliyakb@gmail.com>
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="magehelper_slickslider" frontName="magehelper_slickslider">
<module name="Mage2sk_SlickSlider" />
</route>
</router>
</config>
- So we can run this URL to check our output.. (http://www.example.com/magehelper_slickslider)
- Now we will create our controller and action to show all slick slider demo. We will create controller and action here
app/code/Mage2sk/SlickSlider/Controller/Index/Index.php
And content for this file is :
<?php
/**
* Mage2sk Use Slick slider in Magento 2
*
* @package Mage2sk_SlickSlider
* @author Kishan Savaliya <kishansavaliyakb@gmail.com>
*/
namespace Mage2sk\SlickSlider\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
protected $resultPageFactory;
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
){
$this->resultPageFactory = $resultPageFactory;
return parent::__construct($context);
}
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->prepend(__('Mage2sk Slick slider demo'));
return $resultPage;
}
}
- Create layout file here..
app/code/Mage2sk/SlickSlider/view/frontend/layout/magehelper_slickslider_index_index.xml
Content for this file is ...
<?xml version="1.0"?>
<!--
/**
* Mage2sk Use Slick slider in Magento 2
*
* @package Mage2sk_SlickSlider
* @author Kishan Savaliya <kishansavaliyakb@gmail.com>
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<referenceContainer name="content">
<block
template="Mage2sk_SlickSlider::slick-slider.phtml"
class="Magento\Framework\View\Element\Template"
name="magento-2-slick-slider-demo"/>
</referenceContainer>
</page>
- Create template file here ...
app/code/Mage2sk/SlickSlider/view/frontend/templates/slick-slider.phtml
Add Content in phtml file..
- We need to run following commands to check output properly
php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy -f
Hope this article will helpful to you!!