How to add image slider in my site

The extension Ves Image Slider dont have backend manage images for slider. We just add them by edit widget “Ves Image Slider“. To add the image slider in the site, we have 3 ways to use it.

1. Widget Instance

  • Go to admin > Content > Elements > Widget > Add widget instance.

  • Choose widget type = “Ves Image Slider”, Choose the current frontend theme.

  • Add widget title, choose stores, and add layout position, page where you want to display the image slider

  • Config Widget Options

2. Insert in to content of CMS Page

  • Go to admin > Content > Elements > Page

  • Add New Page or edit the cms page which you want to show image slider.

  • Click on button “insert widget” in text editor of page content. Choose widget type = “Ves Image Slider”

  • Config widget options, then save the changes.

  • Click on button “Save” to save the cms page.

3. Use CMS Static Block

  • Go to admin > Content > Elements > Block

  • Add/edit new block

  • Click on button “insert widget” in text editor of block content. Choose widget type = “Ves Image Slider”

  • Config widget options, then save the changes.

  • Click button “Save” to save the cms block.

To reference the cms block to any position on frontend, you can add widget instance with type = “CMS Static Block” then choose the cms static block which you inserted widget “Ves Image Slider”

Or you can reference the cms static block via layout xml in your custom theme:

  • Edit the file “app/design/frontend/[Vendor Theme]/[Theme Name]/Magento_Theme/layout/default.xml

  • Add the xml code to reference to content top of your site:

  • <referenceContainer name="content">
    <!-- Call CMS static block: image-slider-static-block -->
     <block class="Magento\Cms\Block\Block" name="ves-image-slider" before="-">
         <arguments>
              <argument name="block_id" xsi:type="string">image-slider-static-block</argument>
         </arguments>
    </block>
    </referenceContainer>

Last updated