💜
Image Slider
  • Overview
  • Installation
    • Setup Module
    • Extension Version Update
  • Config and Usage
    • How to add image slider in my site
    • Config widget to add image slider
    • How to config js and css file
    • FAQ
      • How to custom layout xml and template?
      • How to add content over slide image?
      • How to setup sample profile?
  • Other Module Guides
    • Magento 2 Step Recommendation
Powered by GitBook
On this page
  1. Config and Usage

Config widget to add image slider

PreviousHow to add image slider in my siteNextHow to config js and css file

Last updated 1 year ago

The module we are using owl carousel js. You can view more options and sample of it at here:

We have 3 sections to config the widget Ves Image Slider.

1. General Config

  • 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

  • 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

The widget we dont use upload image for each slide. We should insert slider image in 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] . Ex: Ves Azshop Default Slide 1

  • Identifier: [storeview_name]_slide_[number] .Ex: ves_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

Animation In/ Out: Config effect for slide start and slide end. There effects were loaded on the animate.css file.

https://daneden.github.io/animate.css/
http://www.owlgraphic.com/owlcarousel/