Image Slider

Getting Started

Overview

Welcome to Landofcoder!
We would like to thank you for purchasing Extenstions of Landofcoder!

Compatibility
Ves Image Slider is fully compatible with Magento Community Edition 2.0.0, 2.0.2, 2.0.4, 2.0.6, 2.0.7, 2.1.0, 2.1.x

  • Fully responsive magento 2 slider extension
  • Support editor for inserting image, video text.
  • Magento 2 Slider Extension supports OWL Carousel
  • Image slider can be displayed anywhere in your store with CMS & Widget
  • Tons of Animation with Live Preview
  • Support 10 sliders
  • Easy-to-use & intuitive interface

Installation

The module we provide 2 ways of magento 2 slider installation which were supported by magento 2

1. INSTALLATION FROM COMMAND LINE (RECOMMENDED)

Your magento 2 extension can be installed in a few minutes by going through these following steps:

  • Download/purchase the extension
  • Unzip the file in a temporary directory
  • Upload it to your Magento installation root directory
  • Disable the cache under System->Cache Management
  • Enter the following at the command line in SSH terminal:
  • php bin/magento setup:upgrade
    php bin/magento setup:static-content:deploy
  • After opening Stores->Configuration->Advanced->Advanced, the module will be shown in the admin panel

2. MANUAL MAGENTO 2 SLIDER INSTALLATION

  • Download/purchase the extension
  • Unzip the file in a temporary directory
  • Upload it to your Magento installation root directory
  • Disable the cache under System->Cache Management
  • Edit app/etc/config.php file and three line code:
    ‘Ves_ImageSlider’ => 1
  • Clean the cache under System->Cache Management
  • After opening Stores->Configuration->Advanced->Advanced, the module will be shown in the admin panel

3. UPGRADING DATABASE

If you need to upgrade the database, run the following command line:

php  bin/magento setup:db-schema:upgrade

Congrats! You finished install the extension, now you can go forward!

Now your site will have a widget name “Ves Image Slider“. To use it, you should insert widget in content of CMS Page or CMS Static block or add widget instance.

Extension Version Update

Usage

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>

 

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

How to config js and css file

The module we are using js, css files in the Ves_All extension. So, to config the js, css files if there js,css files conflict with js, css files of your custom theme.

  1. Go to admin > Stores > Configuration > Venus Theme > All
  2. Config enable/disable there options:

FAQ

How to custom layout xml and template?

To override the module on your custom theme you should create the folder module in your custom theme folder as this:

app/design/frontend/[Vendor Theme]/[Theme Name]/Ves_ImageSlider

Then copy there files and folders in folder: app/code/Ves/ImageSlider/view/frontend/ Then paste into the folder “Ves_ImageSlider” on your custom theme folder.

1. Config layout xml

  • Edit the file “app/code/Ves/ImageSlider/view/frontend/layout/default.xml”
  • The content code of the file:
  • <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    	<head>
    		<css src="Ves_ImageSlider::css/owl.carousel.min.css" />
    		<css src="Ves_ImageSlider::css/animate.css" />
    	</head>
    	<body>
    		<referenceContainer name="before.body.end">
    			<block class="Magento\Framework\View\Element\Template" name="imageslider.js" template="Ves_ImageSlider::js.phtml" />
    		</referenceContainer>
    	</body>
    </page>
  • The module are calling 2 css files:
  • <css src="Ves_ImageSlider::css/owl.carousel.min.css" />
    <css src="Ves_ImageSlider::css/animate.css" />

If you want to remove there css files you just need add code in layout xml as this:

<remove src="Ves_ImageSlider::css/owl.carousel.min.css" />
<remove src="Ves_ImageSlider::css/animate.css" />

2. Custom template

  • Edit the file “app/code/Ves/ImageSlider/view/frontend/templates/widget/slides.phtml
  • The file “app/code/Ves/ImageSlider/view/frontend/templates/js.phtml” to init owl carousel js to run image slider.

How to add content over slide image?

1. Add content, text, button, link, html code over on slide image

Just input custom html code in content of each slide, or content of cms static block of each slide.

We recommend you add a div wrapper for content of slide image as this.

<div class="image-slide-description">
<!-- Write text, button link, or html code at here -->
</div>
<img src="your_image_slide_url" class="responsive image-slide" alt="image slide 1">

2. Set animation for the content over on slide image

The module are using animate.css to set effect for content over slide image. To know how to use animate.css class you can view at here: https://daneden.github.io/animate.css/

Just add effect class which was supported by animate.css into content element over on slide image.

<a href="#" class="btn btn-success element-center animated infinite bounce" title="View More">View More</a>

How to setup sample profile?

The Ves Image Slider extension we included a sample slider profile in the module package. You should download latest version of Ves Image Slider extension in our site: http://landofcoder.com/

 

Demo Sample Slider Profile: http://newdemo.demo4coder.com/m2/demo-ves-image-slider/

Follow there steps to setup the sample slider profile:

Step1: Decompress the module package, then decompress the file “Sample_Ves_ImageSlider_unzip.zip“. We will get the sample file and folders:

Step2: Go to admin > Venustheme > Setup > Import, then browse the sample JSON profile and click on button Import configuration

Step3: Upload folders: app/ and pub/ of sample profile into webroot folder of your site to override 2 folders in your site.

Step4: Clean cache of your site.

View the page: http://your domain/demo-ves-image-slider/

*Note: If the page not show the image slider, you should edit the cms page “Demo Ves Image Slider” in admin > Content > Elements > Page. Then edit the widget “CMS Block”, choose the cms static block “Demo Image Slider Widget“, save the widget and save the cms page again.

TIP:

  • The static block “Demo Image Slider Widget” we are using widget shortcode as this:
<div>{{widget type="Ves\ImageSlider\Block\Widget\Sliders" addition_class="demo-slider-01" autoplay="1" autoplay_timeout="3000" autoplay_speed="900" nav_speed="800" dots_speed="800" autoplay_hover="1" dots="1" loop="1" touchdrag="1" mousedrag="1" pulldrag="1" block_1="custom_content" html_1="PGEgaHJlZj0iIyI+PGltZyBzcmM9Int7bWVkaWEgdXJsPSJ3eXNpd3lnL3Zlc19wYWdlYnVpbGRlci9ob21lMDEvc2xpZGVyc2hvdy8xLmpwZyJ9fSIgYWx0PSIiIC8+PC9hPgo8ZGl2IGNsYXNzPSJzbGlkZXJzaG93LWluZm8iPgo8aDM+VG9kYXkgU3BlY2lhbDwvaDM+CjxwPkFkZCBhIHN0eWxpc2ggdG91Y2ggdG8geW91ciBsaXZpbmcgc3BhY2U8L3A+CjxhIGNsYXNzPSJidXR0b24gYnRuIiBocmVmPSIjIj5TSE9QIE5PVzwvYT4KPC9kaXY+" block_2="custom_content" html_2="PHA+PGEgaHJlZj0iIyI+PGltZyBzcmM9Int7bWVkaWEgdXJsPSJ3eXNpd3lnL3Zlc19wYWdlYnVpbGRlci9ob21lMDEvc2xpZGVyc2hvdy8yLmpwZyJ9fSIgYWx0PSIiIC8+PC9hPjwvcD4KPGRpdiBjbGFzcz0ic2xpZGVyc2hvdy1pbmZvIj4KPGgzPlRvZGF5IFNwZWNpYWw8L2gzPgo8cD5BZGQgYSBzdHlsaXNoIHRvdWNoIHRvIHlvdXIgbGl2aW5nIHNwYWNlPC9wPgo8YSBjbGFzcz0iYnV0dG9uIGJ0biIgaHJlZj0iIyI+U0hPUCBOT1c8L2E+PC9kaXY+" block_3="custom_content" html_3="PHA+PGEgaHJlZj0iIyI+PGltZyBzcmM9Int7bWVkaWEgdXJsPSJ3eXNpd3lnL3Zlc19wYWdlYnVpbGRlci9ob21lMDEvc2xpZGVyc2hvdy8zLmpwZyJ9fSIgYWx0PSIiIC8+PC9hPjwvcD4KPGRpdiBjbGFzcz0ic2xpZGVyc2hvdy1pbmZvIj4KPGgzPlRvZGF5IFNwZWNpYWw8L2gzPgo8cD5BZGQgYSBzdHlsaXNoIHRvdWNoIHRvIHlvdXIgbGl2aW5nIHNwYWNlPC9wPgo8YSBjbGFzcz0iYnV0dG9uIGJ0biIgaHJlZj0iIyI+U0hPUCBOT1c8L2E+PC9kaXY+"}}</div>
  • The cms page “Demo Ves Image” we should add custom layout xml as this to load sample css file (you can load sample css file of the module by layout xml in your custom theme):
<head>
	<css src="Ves_ImageSlider::css/sample.css" />
        <css src="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" src_type="url"/>
</head>

 

1. CMS Page “Demo Image Slider Widget”:

2. CMS Static Block “Demo Ves Image“:

 

Top