User Tools

Site Tools


Sidebar

magento_2:banner-slider

For more details see how the Banner Slider for Magento 2 works.

Guide for Banner Slider for Magento 2

Create an unlimited number of eye-catching banner sliders with no programming skills required. Embed Magento 2 Sliders anywhere in your store. Add target URLs to lead visitors directly to your special offers.

  • Highlight sliders with a rich set of animation effects
  • Automatically resize images depending on a screen resolution
  • Simplify exploring sliders with navigation bullets and arrows
  • Benefit from compatibility with the Jet Theme for Magento 2

Extension settings short overview

  • Each slider may contain from several banners or from just one;
  • Banners and sliders should be configured separately on the specified grids for each;
  • Several different sliders can use the same banner;
  • You can assign specific banners to the sliders on a slider configuration page;
  • You can specify the banner width only, the length will be adapted automatically;
  • Sliders are embedded on the website through the widgets.

Grid of sliders

All sliders could be monitored and managed on the sliders grid. Please navigate to Content → Amasty Banner Slider → Manage Sliders to use it.

Here you can use mass actions to enable, disable, and delete sliders from the grid.

Click on the 'Create New Slider' button to configure a new slider.

How to create new slider

Slider name - please specify slider name here, e.g. 'Fall sales' or 'Slider with coupon code'.

Status - use the switcher to enable and disable slider. Its status will be automatically updated on the grid in a 'Status' column.

Enable Autoplay - set 'Yes' to enable the automatic slideshow. If switched off, users will have to click on each slide manually to see the next one.

Pause Time Between Transitions - If the Autoplay is enabled (set to 'Yes'), you can specify the time between one slide changes to another, in milliseconds. If left empty, the default value (3500) will be used.

Animation effects

Animation Effect - use this setting to apply animation effects with which the slides transition will occur.

Three different animation effects are available for now:
  • Rolling - see this effect on our demo ;
  • Split Slideshow - see this effect on our demo;
  • Bubble - see this effect on our demo.

Slide Transition Speed - please specify in milliseconds how fast the animation will be displayed. For proper slider display, we recommend setting a value of more than 1000 here.

Styles of arrows & bullets

To simplify user navigation through the banners on a slider you create, we've added an opportunity to equip sliders with navigation bullets (they show how many banners this very slider contains) and navigation arrows (thus user naturally understands how to see other banners in your slider).

See how three available arrow & bullet styles look on the frontend:

Navigation Arrows - set 'Show' to enable navigation arrows on the frontend.

Arrows Style - stylize slider navigation by choosing from three available arrow styles.

Navigation Bullets - set 'Show' to enable navigation bullets on the frontend.

Bullets Style - stylize slider navigation by choosing from three available bullet styles.

Resize Images - If set to 'No', you'll be able to specify banner width only, and the height will be resized automatically. If set to 'Yes' images will be resized in the backend according to the width and height values you set (recommended for a better score on Google PageSpeed Insights).

Width, px - here you can specify the banner width in pixels.

Height, px - here you can specify the banner height in pixels. Please note, that this setting will be unavailable if you set 'No' in the 'Resize Images' setting above.

How to assign banners to a slider

Please consult with the 'How to create a new banner' section of this guide first if you haven't created any banners yet.

There's a simplified grid of banners below the configuration settings of each slider.

Here you can:

  • see how many banners are assigned to this slider,
  • monitor banner statuses,
  • remove some banners,
  • add new or even change their order with the drag-n-drop feature.

The banner preview feature helps to quickly navigate through the banners assigned to a specific slider.

  1. Click on the 'Add Banners' button to add a new banner to the slider you are setting up. You'll see the vertical curtain menu with the banners grid and banners available for the selection.
  2. Put the checkboxes on banners you'd like to put in the slider and click on the 'Add Selected' button. These banners will appear on the simplified banners grid.


Grid of banners

There's a separate grid with banners only where you can:

  • monitor statuses of the banners (enabled/disabled);
  • see the minified banner image as a banner preview;
  • see if a banner leads to any promo URL (the 'Target URL' column);
  • see to which customer groups this banner is assigned;
  • delete banners individually or apply mass actions for their deleting, enabling or disabling;
  • edit banners.

How to create a new banner

Status - Set 'Enabled' to make banner visible on the frontend.

Name - please specify the name of your banner here.

Image Alt - here you can specify the image alt to provide additional information about the image.

See an example how the Image Alt will be displayed on a frontend:

Image - upload your banner here. Please keep in mind that supported file types are the following: JPEG (JPG), PNG, GIF.

Please note that the size of the uploaded image is limited by the server settings.

Target URL - you can specify any URL here so the banner will lead to it by a click.

On Hover Text - here you can specify any text to provide shoppers with more information about the offer and thus motivate them to click on a banner. This text will be shown only on a mouse hover.

Customer Group - please specify customer groups for which this banner will be displayed.


How to embed sliders on store pages

If you configured all necessary settings for the banners and sliders, then it's time to specify where your slider or sliders will be displayed.

Please navigate to the Content → Widgets and click the button 'Add Widget' to create a new one.

Please note that the type of new widget should be 'Amasty Slider'.

Then choose the Magento theme which is applicable to your case and continue configuring a new widget.

Set the widget title, assign a widget to the needed store views, and specify its sort order (Sort Order of widget instances in the same container).

In order to configure the display of a slider widget on a certain store page or pages, please use the 'Layout Updates' settings below the 'Storefront Properties' section.

First, please choose if you want to embed your widget on Categories (anchor or non-anchor), Products (depending on the product type), or Generic Pages. Depending on that choice you'll see the available containers for that type of store page.

As per products and categories you can choose whether to display the slider on all store product/category pages in bulk or on the specific only.

As per Generic pages, there's the choice from three options, depending on which you'll see the unique set of the available containers:

  • All Pages;
  • Specified Page;
  • Page Layouts.

As you're ready with choosing a specific location for the slider display, please navigate to the 'Widget Options' to configure two more important settings:

Show Slider Name - If set to 'Yes', the slider's name will be used as a title of the widget on the frontend. Set 'No' for the slider to be displayed without any title above it.

Slider - please choose that slider the display of which you're configuring.

Click on the 'Select Slider' button to see the vertical curtain with the simplified slider grid with the sliders available for picking up.

Moreover, you can embed widgets to the store pages via the WYSIWYG editor or the Page Builder by clicking on the 'Insert Widget' button.

Frontend Examples

Product Page

See this example on the demo

See how text appears on a banner hover:

Home Page

Category page (Sidebar)

Find out how to install Banner Slider extension for Magento 2 via Composer.

Rate the user guide
 stars  from 1 votes (Details)
magento_2/banner-slider.txt · Last modified: 2020/10/01 08:39 by hfedulova