Our brands

2 Steps Adding Image Slider To Magento 2 Theme Using Widget Instance

One key leading to the success of your website is how it drives customer. The more attractive it is, the higher traffic to your website.

Image Slider definitely contributes to that success a lot. When using a Magento 2 theme by Venustheme, fortunately, you already get that image slider extension freely included.

In this tutorial, I gonna show you 2 steps to add image slider Magento 2 theme. Before we start, I want to note that there is no backend management for image slider, for instead, we will add and edit by using widget “Ves Image Slider”

Step 1: Configure Widget Instance
– Admin Panel > Content > Elements > Widget

add image slider magento 2
– Click on Add Widget button.
– At Type drop-down, choose Ves Image Slider. At Design Theme, choose you current front end theme (here we use Magento Blank). Then click on Continue button.
– Add widget title, choose stores, and add layout position, page where you want to display the image slider
– Config Widget Options

add image slider magento 2

Step 2: Add image slider

The module we are using is owl carousel js. You can view more options and sample of it at here: http://www.owlgraphic.com/owlcarousel/

1. General Config

add image slider magento 2
– Title: Add the title to show as block title on frontend
– Addition Class: Input prefix css class for block wrapper on frontend

2. Carousel Config

add image slider magento 2
– Animation In/ Out: Config effect for slide start and slide end. These effects were loaded on the animate.css file. https://daneden.github.io/animate.css/
– Enable/disable Auto play the slide.
– Config Timeout, auto play speed, navigation speed, dots speed.
– Enable/disable Loop slide images.
– Config enable/disable navigation, dots
– Enable/Disable touch/mouse/pull Drag

3. Slide Manage

add image slider magento 2

We don’t use the widget to upload image for each slide. We should insert slider image in the content of each slide item, or insert image in content of cms static block of each slide item.

The widget allow you add maximum 18 slide items. If you dont choose static block or input content, the slide item will not show on frontend slider.

If you want to add slide item via CMS Static block. You should add static block in admin > Content > Elements > Block. Add new static block, and insert image in content.

The static block we recommend you add Title, Identifier as format:

  • Title[Store View Name] Slide [Number] . ExVes Azshop Default Slide 1
  • Identifier[storeview_name]_slide_[number] .Exves_azshop_default_slide_1

The content of slide item will have code as this:

<div class="ves-slide slide-item-01">
    <div class="slider-content">
       <h1>SPECIAL OFFER THIS WEEK</h1>
       <h2>EXCLUSIVE SAVINGS</h2>
       <h3>PROIN GRAVIDA NIBH VEL VELIT AUCTOR ALIQUET. AENEAN SOLLICITUDIN, LOREM QUIS BIBEND UM AUCTOR, NISI ELIT CONSEQUAT IPSUM</h3>
       <a class="btn" href="#">view more</a>
    </div>
    <a href="{{store url="women/"}}"> <img src="{{media url="wysiwyg/azshop/home02/slider_auto2.png"}}" alt="" /> </a>
</div>
  • slide-item-01: each slide item we should have different css class. It will allow you add style for each slide item

In the content of slide item should have the code to load image for slider:

<img src="{{media url="wysiwyg/azshop/home02/slider_auto2.png"}}" alt="" />

On frontend will load image file with url as this:
http://[your domain]/pub/media/wysiwyg/azshop/home02/slider_auto2.png

 

This is the end of my tutorial on how to add image slider Magento 2 theme. Hope it helpful for you.

Some Magento 2 extensions you may prefer:

Magento 2 Image Gallery Extension

Magento 2 Page Builder Extension

Magento 2 Multi Vendor Marketplace Extension

Magento 2 Mega Menu Extension

Magento 2 Layrered Navigation Extension

Share this Post!

0 Comment

Leave a Comment

Your email address will not be published.