User Guide: Magento 2 Banner Slider

Modified on Mon, 6 Jun, 2016 at 4:05 PM

User guide of Banner Slider for Magento 2


In this guide, I will show you how to insert A banner slider into Homepage of Magento 2 store.



Step 1: Add new banners

First of all, you should add banners into your store.

From Magento 2 Admin > Banner Slider > Banners > Add New Banner

Fill information, upload image file to Upload File file.



Then Click Save Banner

You can add as many banners as you want. After finish adding banners, you can go to next step: add a new slider.



Step 2: Add a new slider


From Magento 2 Admin > Banner Slider > Sliders > Add New Slider


Fill Slider information as the following:





Click on Banners tab, and choose uploaded banners. You also can sort order by position.



Then Save Banner, you can see slider_id in this example is 1





Step 3: Insert into Homepage


Go to Admin > Content > Pages > Homepage > Content

 

{{block class="Mageplaza\BetterSlider\Block\Slider" template="Mageplaza_BetterSlider::slider.phtml" banner_id="1" }}

 

You can change your own banner_id value depend on your store.


Then click Save Page.


Step 4: Flush Cache and Check result


To flush Magento cache, you can follow this guide: Magento 2 how to flush cache


Navigate your browser to Magento homepage and check result. Here is what we get.







How to insert Banner Slider in layout file


In Xml file, you can insert the following block of code:


 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">

    <referenceContainer name="content">
        <block template="slider.phtml" class="Mageplaza\BetterSlider\Block\Slider" name="mageplaza_betterslider"/>
    </referenceContainer>
</page>

 

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article