Config widget to add image slider

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

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

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

• 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