Webinse Slider Banner for Magento 2
Webinse Slider Banner extension for Magento 2 allows create and adding slider or banner to store pages.
Overview
The slider banner extension allows you to create slider, add settings to display and add to the right place for you in your store. Also you can view the statistics of clicks on each slide, thus leaving only up-to-date information for your customers.
NOTE: This extension is guaranteed to work with Magento Default Theme. We don’t say that it won’t work with customization at all, but due to the the great majority of Custom themes we cannot guarantee the proper work of the extension with all of them.
How to install the extension
Follow to our Magento 2 Extension Installation Guide
Features
-
The administrator can enable/disable extension and each slider
-
Ability to set start and end date for each slide
-
Ability to add a link to a slide
-
For each slide it is possible to add custom HTML code
-
Ability to add video to play on the slide
Administration & Configuration
All features and user interfaces are fully configurable, require little time to install and can be controlled from the Magento Administration Panel.
Version and Compatibility
Banner Slider Extension version 1.0.0 is compatible with Magento 2.1 - 2.2
How to Configure?
Log in to the admin panel, and we will show you how to configure the extension step by step.
Creating slider
Add content for slides
Firstly needed add slides. Webinse tab -> Slider Image and click to “Add Image”
Add settings to new slide
General settings.
|
Field
|
Description
|
|
Name
|
Name to slide
|
|
Description
|
You can add description for slide. (it’s not required option)
|
|
Enable
|
Status slide (on | off)
|
|
Banner Time From
|
Set date start display to slide
|
|
Banner Time To
|
Set date end display to slide
|
|
Url Link
|
You can set a link to the slide
|
|
Open link type
|
Open link to the new window or current
|
Content settings
|
Field
|
Description
|
|
Content type for slide
|
Choose type content for slide, video or image. By default it’s image.
|
|
URL Video
|
(Only youtube)To get the link, open your video and press "Share" then "Embed" and copy link. For example: https://www.youtube.com/embed/Video_Code. And set to the field only Video_Code!
|
|
Banner image
|
You need to upload the image in any case
|
|
HTML content
|
You can add custom html content to the slide
|
After making the settings, click to save.
Add new slider
Go to Slider Editor and click to “Add new slider”
Slider tab.
|
Field
|
Description
|
|
Name
|
Name to slider
|
|
Description
|
You can add description for slider. (it’s not required option)
|
|
Status
|
Status slider (on | off)
|
|
Width
|
Width content. By default 100%
|
|
Height
|
Height content. By default 450px
|
|
Image size
|
Image sizing. Stretch or crop.
|
|
Autoplay
|
Autoplay (on | off)
|
|
Autoplay speed
|
Autoplay speed. By default 4000ms
|
|
Speed
|
Speed switching slide
|
|
Amount slide to display
|
Amount slide to display on slider
|
Select slides
Choose “Banners” tab, select the desired slides and save slider
After saving you will see the “id” of the slider for display.
Display slider
Add new widget
Content -> Widget -> Add widget “Webinse Slider”
Add settings for the widget and select Layout Update to display it.
Go to the tab Widget Options and set the field “New Slider” slider id that you created.
Save the widget and clear the cache.
Configuration settings
|
Field
|
Default value
|
Description
|
|
Enabled Extension
|
Yes
|
Enable extension
|
|
Switch Slider CSS styles
|
.slick-prev:before, .slick-next:before {
font-size: 70px;
color: #EA8496;
line-height: inherit;
font-weight: bold;
}
.slick-prev:before {
content: '\2329';
}
.slick-next:before {
content: '\232A';
}
|
Add or change switch slider styles
|
|
Custom css style for slider
|
none
|
Add custom slider styles
|
