Download the PHP package mage2sk/module-slick-slider without Composer

Mage2sk : How to use Slick Slider in Magento 2

We will learn here, how to use Slick Slider in Magento 2 step by step.

We can create new module in app/code/ directory..

Step - 1 - Create a directory for the module

• In Magento 2, module name divided into two parts i.e Vendor_Module (for e.g Magento_Theme, Magento_Catalog)
• We will create Mage2sk_SlickSlider here, So Mage2sk is vendor name and SlickSlider is 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

Step - 2 - Create module.xml file to declare new module.

• 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.xml and it's content for our module is :

<?xml version="1.0"?>
<!--
/**
 * Mage2sk Use Slick slider in Magento 2
 *
 * @package      Mage2sk_SlickSlider
 * @author       Kishan Savaliya <[email protected]>
 */
-->
<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.

Step - 3 - create registration.php

• All Magento 2 module must be registered in the Magento system through the magento ComponentRegistrar class. 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:

<!--
/**
 * Mage2sk Use Slick slider in Magento 2
 *
 * @package      Mage2sk_SlickSlider
 * @author       Kishan Savaliya <[email protected]>
 */
-->
<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)

Step - 10 - Create Controllers and Actions

• 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 :

<!--
/**
 * Mage2sk Use Slick slider in Magento 2
 *
 * @package      Mage2sk_SlickSlider
 * @author       Kishan Savaliya <[email protected]>
 */
-->
<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..

Step - 12 - Run following commands

• 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!!