Magento® 2 - Responsive Banner SLIDER and OWL CAROUSEL

Rating:
90% of 100
$0.00
Choose Magento Edition and Services
$0.00

About Banner Slider For Magento 2.

This fully customizable carousel enables you to create and automate visibility for responsive sliders / banners and place them anywhere on your Magento store.

Responsive Banner Slider for Magento 2 is built on top of owl.carousel.js javascript library. It allows you to add banners with images, videos or custom content in your Magento 2 store and automate banners visibility. Sliders are known to increase page engagement and also reduce the bounce rate. Once you add sliders to your pages you can highlight promotions, direct customer attention to special offers, products or pages from your Magento 2 store and attract customers attention from the very first moment.

By using this extension you will be able to:

  • Attract customers right from the very first moments they are on site.
  • Highlight your promotion, campaign or any events by using banner slider
  • Direct customer attention to special offers
  • Easily insert sliders using magento widgets, no coding needed
  • Automate promotions by scheduling banners visibility

Create Banner Sliders with the following content:

  • Images
  • Videos
  • Links
  • Buttons
  • Description
  • Custom Content

weltpixel
weltpixel

Banner Slider Features.

  • Responsive design with slider breakpoint control.
  • Banners can be displayed on any CMS, product and category page
  • Banner scheduling - each banner may be scheduled to be activated and deactivated at specific time
  • Feature amazing images and videos - create a unique experience for your customers and grow engagement
  • Full control over Slider behaviour with functionalities as autoplay, lazyload, loop,transition effect, autoplay hover pause.
  • Gesture support – mobile friendly;
  • Add custom CSS and HTML content for each banner
  • Easy to use - insert slider using magento widgets, no coding needed, unlimited banners

About Owl Product Carousel for Magento 2.

OWL Product Carousel is built on top of owl.carousel.js javascript library. It allows you to add product carousels to any section of your store.

Creating and managing products carousels has never been easier. Using carousels is a good way to showcase the latest or hot products. You can create any number of responsive carousels and place them on your homepage, product page or anywhere on your store. OWL Product Carousel allow store owners to control frontend visibility of product price, compare option, add to cart button, enable carousel auto sliding and much more. You can also add catchy labels to each carousel type so that it could stand out among others.

Create OWL Product Carousels with the following products types:

  • New Products
  • Best Sell Products
  • Sell Products
  • Recently Viewed Products
  • Related Products
  • Upsell Products
  • Cross-sell Products
weltpixel
weltpixel

OWL Product Carousel Features.

  • 100% Responsive and mobile friendly with support all modern browsers.
  • Advanced settings for enhanced flexibility.
  • Unique settings for each carousel slider.
  • Unlimited products display.
  • Control number of items to display on desktop, tablet and mobile devices.
  • Navigation arrows visibility control on desktop, tablet and mobile devices.
  • Navigation dots visibility control on desktop, tablet and mobile devices.
  • Product Title, Price and Cart button display/hide options.
  • Autoplay with speed control.
  • Mouse over stop.
  • Loop control.
  • Lazy load control.
  • Touch and Swipe enabled so works great on devices like iPhone, iPad, Blackberry, Android etc.
  • Very lightweight.

How to Install the Extension:

  • Step 1:
    Before installing Responsive Banner SLIDER and OWL CAROUSEL Extension on a Magento 2 store please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.1.3. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
  • Step 2:
    Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
    app/code/WeltPixel/Backend
    app/code/WeltPixel/OwlCarouselSlider
  • Step 3:
    Access the root of your magento 2 project from command line and run the following commands:
    php bin/magento module:enable WeltPixel_Backend --clear-static-content
    php bin/magento module:enable WeltPixel_OwlCarouselSlider --clear-static-content
    php bin/magento setup:upgrade
  • Step 4:
    Flush any cache that you might still have enabled on your server or in Magento.
  • Step 5:
    Woohoo, the extension is installed!

How to create a Banner Slider.

Step 1: Define breakpoints

  • Go to Admin > WeltPixel > OWL Product Carousels > General Configuration for OWL Product Carousels and Banner Sliders, and set up to four breakpoints for different screen resolutions.
  • In next steps you will be able to set slider item numbers for each breakpoint . For example, you can set to display 2 items on mobile screens, 3 items on tablets and 4 items on desktop.
weltpixel
weltpixel
  • a. Go to WeltPixel > Banners for Sliders settings, click on Add New Banner button to create a new banner.
  • b. configure the banner using the Banner Settings:

    • Title - set a title for the banner
    • Show Title [Yes / No] - show the banner title in frontend, it will show on the banner
    • Description - set a description for current banner
    • Status [Enabled / Disabled] - enable or disable current banner
    • Slider - assign current banner to a specific Slider. Slider Note: If no slider is created yet, you can ignore this option and assign the banner later from Slider Manager
    • URL - set the URL where the banner/button should link when clicked on.

      URL Note: set the URL without your store baseurl, ex: /women.html;

      URL Note 2: If ‘Text Button’ option is filled, URL will be linked to the button instead of banner

weltpixel
weltpixel
  • ..Banner Settings:

    • Target [Same Window / New Window Tab] - choose where the banner/button link should open
    • Button Text - fill any text here and it will be displayed on a button on your banner

      Button Text Note: you must set a URL link in order for the button to be displayed on the banner

    • Banner Type [Image / Video / Custom] - banners can be Images (select file), Videos (insert embed iframe) or Custom (insert custom HTML).

      Example of banner type: Video


      <iframe id="your_ID" class="playerBox" style="position:
      absolute; z-index: 0; width: 1400px; height:
      1000px; top: 0px; left: 0px; overflow: hidden;
      opacity: 1; margin-top: -150px; margin-left:
      0px;" frameborder="0"
      allowfullscreen="1"
      title="YouTube video player"
      src="https://www.youtube.com/embed/4KEBnFE
      OOv0?autoplay=1"></iframe>
                    
    • Create custom banner here - available and applicable only for Banner type ‘Custom’; Here you can create a custom banner different than Image or Video.
    • Alt Text- set alternative text if the Banner if an Image; it will show on image hover as tooltip.
    • Banner class - here you can view the name of the Wrapper class of the current banner. It can be used in Custom Content field to style each banner from the slider. The name of the class is displayed only after you save the banner.
  • ..Banner Settings:

    • Custom HTML Content - insert your custom HTML Content, applicable for current banner, all banner types.

      Example of custom HTML content:

      <p class="myclass"> Custom HTML content</p>
                    
    • Custom CSS - insert your custom CSS, applicable for current banner, all banner types.

      Note: Use above ‘Banner Class’ option to apply the CSS only for this banner.

      Note 2: ‘Banner Class’ option is generated only after the first banner save, if not present, please save the banner and continue to edit.

      Example of custom CSS:

      .banner-6 .myclass{ font-size: 38px; }
                    
    • Banner Valid From - start date for banner to be displayed in Slider.
    • Banner Valid To - end date for banner to be displayed in Slider.
weltpixel
weltpixel
  • c. Save the banner and repeat steps 1.a and 1.b until you have created all necessary banners for your slider.

Step 3: Create and configure your slider

a. Go to WeltPixel > Sliders Manager settings, click on Add New Slider button to create a new slider.

weltpixel
weltpixel
b. configure the Slider using the Slider Settings:

Slider General Configuration

  • Title - set the slider Title
  • Show Title [Yes / No] - if enabled, the slider title configured above will show in frontend
  • Slider Status [Enabled / Disabled] - enable or disable the current slider
  • Next/Prev buttons [True / False] - show slider navigation buttons

    Note: This setting is overwritten by responsive settings

  • Dots [True / False] - show navigation dots in bottom area of the slider
  • Banner Transition Effect [Slide / Fade] - slider transition effect
  • Center Item [True / False] - shows banners on center of the slider and shows neighbour banners

    Note: Center option only available for Banner Transition Effect: Slide

  • StagePadding - shows banners on center of the slider and neighbour banners with specified padding on the sides.

    Note: Only available if Transition: Slide and Center:False

  • Margin - right margin of banners present in slider (in px), by setting this parameter you define the space between banners present in slider.
  • Items - number of items/banners visible at the same time on the slider

    Note: This setting is overwritten by responsive settings

weltpixel
weltpixel
  • Loop [True / False] - control slider banner loop
  • LazyLoad [True / False] - Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to the items.
  • Autoplay [True / False] - activate autoplay for slider items
  • Autoplay Timeout - set time between changing banners (in miliseconds, for ex: 4000, for 4 seconds)
  • Autoplay Hover Pause [True / False] - set the autoplay to pause on mouse hover
  • Auto Height [True / False] - set auto height of the banners in the slider.
Slider Responsive Breakpoints

NOTE: Below responsive settings will overwrite Slider General Configuration

NOTE 2: Breakpoints are already configured in Admin > WeltPixel > OWL Product Carousels > General Configuration for OWL Product Carousels and Banner Sliders.

If necessary you can change default settings with the ones you require in your project.

  • Next/Prev Buttons [True / False] - show slider navigation buttons for each breakpoint configured.
  • Items - number of items/banners visible on the slider for each breakpoint
weltpixel
weltpixel

Step 4. Assign Banners to your Slider

  • Go to ‘Slider Banners’ tab under ‘Slider Information’
  • Click on Reset Filter to display all your banners.
  • Choose the banners you want to display in your slider.
  • Fill in the banners order in the slider, starting with position 0. If not filled, banners will have by default sort order ‘0’.
  • Hit ‘Save Slider’.

Step 5 : Insert the slider in your page

You can insert multiple sliders in your pages. Follow next steps to insert in your pages sliders with images/videos or other custom content, using widgets:

  • Go to Admin > Content > Pages and edit the page where you wish to insert the slider
  • In Content tab Show Editor click Insert Widget button
  • Select WeltPixel - Custom Slider Widget
  • In Widget Options choose the Slider you wish to insert in the page
  • Click button Insert Widget
  • Save the page and check results
weltpixel
weltpixel
Advanced Settings:

Advanced users can insert sliders pages that do not have an admin editor by inserting a custom code in the corresponding phtml file.

Inserting Slider code in phtml file

  • 1. Use the following code to insert the slider in your desired phtml file:
    <?php echo $this->getLayout()->createBlock
    ("\WeltPixel\OwlCarouselSlider\Block\Slider\Custom")->setSliderId('3')->toHtml(); ?>
                  
  • 2. Replace the sample value ‘3’ with the desired existing slider id from Weltpixel > Sliders Manager admin grid.

Change Log.

What’s new in version 1.3.2 - March 11, 2017

  • Added possibility to track Banner Click-Through-Rate (CTR) and revenue generated by the banner.
  • Fixed transparency issue - slides now visible on Safari browser, OWL Banner Slider
  • Fixed mobile navigation icons
  • Fixed prev / next navigation out of screen
  • Fixed carousel product picture padding when used in CMS pages

What’s new in version 1.3.1 - 02/21/2017

  • New option - control Dots visibility of product carousels per each configured breakpoint
  • Fixed - recently viewed products collecion fix for product carousel
  • Fixed - not rendering head title html if no title set in backend

What’s new in version 1.2.2 - 01/23/2017

  • Refactoring admin option names, admin hints for a better user experience
  • New documentation, html format, detailed with different structure
  • Small css adjustments and fixes

What’s new in version 1.1.0 - 11/22/2016

  • Renamed from “sell” to “Sale” products
  • Fix for proper product base url fetching
  • Image link bug fix
  • Option added for display to wishlist and compare
  • Time changed for setTimeout
  • Bug fixed to arrows position and ajaxComplete for loading
  • Title tag changed in h3
  • Loader fix
  • Dots and arrows fix

What’s new in version 1.0.4 - 10/12/2016

  • Options to display wishlist and compare on product page slide
  • Fixed loader for banner slider and product page carousel, in some cases loader kept loading
  • Frontend layout fixes
  • Fixed product case url fetching
  • Default config changes, enable product sliders by default
  • Typo changes

What’s new in version 1.0.3 - 08/24/2016

  • Adjusted default settings for banner sliders
  • Added validation for fields that caused confusion when setting up sliders
  • Bug fixed: image lost when saving the banner
  • Added info comments on admin options
  • New design feature: apply a different design for each banner using custom CSS / banner
  • Reorganised admin options for a more intuitive usability

What’s new in version 1.0.2 - 06/05/2016

  • Fix for slider, in some circumstances the images were not loaded
  • Fix for loader which sometimes loaded infinitely
  • Fix for slider, when slider was clicked the homepage refreshed, even if no link was set.
weltpixel
Write Your Own Review
You're reviewing:Magento® 2 - Responsive Banner SLIDER and OWL CAROUSEL
Your Rating