Magento 2 Responsive Banner Slider and OWL Carousel.

Rating:
95%
$0.00
Links
$0.00
$0.00  Free version $99.00  Pro version
Magento 2 Banner Slider & Owl Carousel Extension benefits bar

All OWL Banner Slider & Carousel Free Features

Separate mobile and desktop image for banners

On mouse Hover show second image on product carousels

Custom Category product carousels

Clickable Banner Carousel Title & Description

Show also Configurable Products in Best Sell Carousel

Re-use the same banners in multiple sliders

Best sell carousel - select period (day/month/year) for best sell statistics

Carousel Slide - set one or multiple items per slide.

Upload Custom Loader gif

1 Minute Installation GUI

1 Month free support included

Free Version

Pro Version

About Banner Slider For Magento 2.

This fully customizable carousel enables you to create and automate visibility for responsive sliders / banner carousels 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 banner carousels with images, videos or custom content in your Magento 2 store and automate banner carousels 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 carousel
  • Direct customer attention to special offers
  • Easily insert sliders using Magento widgets, no coding needed
  • Automate promotions by scheduling banner carousel visibility

Create Banner Sliders with the following content:

  • Images (Separate Mobile and Desktop Image now available in Pro version)
  • Videos
  • Links
  • Buttons
  • Description
  • Custom Content

Magento 2 Banner Slider & Owl Carousel Extension screenshot girl modeling
Magento 2 Banner Slider & Owl Carousel Extension screenshot featuring homegoods banners

Magento Banner Slider Features.

  • Responsive design with slider breakpoint control.
  • Banner carousel can be displayed on any CMS, product and category page
  • Banner carousel 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 carousel
  • 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
  • Sale Products
  • Recently Viewed Products
  • Related Products
  • Upsell Products
  • Cross-sell Products
  • Custom Category Products (show products from specific category, now available in Pro version )
Magento 2 Banner Slider & Owl Carousel Extension screenshot featuring stools and seats
Magento 2 Banner Slider & Owl Carousel Extension screenshot featuring fashionable new arrivals

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.
  • Hover Image - show a second product image on mouse hover (now available in Pro version)

1 MINUTE INSTALLATION GUI.

  • Step 1:
    Before installing please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.3.1. 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:
    Copy the installation GUI folder 'weltpixel-extension-installation' in the root of your Magento installation. In some Magento configurations the public root folder may be under 'pub' directory.
    www.yourmagentostore.com/weltpixel-extension-installation/
  • Step 4:
    In your browser go to www.yourmagentostore.com/weltpixel-extension-installation/ and simply follow the installation steps from the graphical interface, presented in your browser. See the installation video: 1 Minute Module Installation via browser GUI.
  • Step 5:
    Wooohooo! The extension is now installed on your Magento store! Congrats!

Troubleshooting

If you experienced any issues or limitations with this quick GUI installation, see also SSH Installation below. SSH installation does the same thing but you are required to issue the commands step by step via CLI. Some servers may have high security configurations and may limit the functionality of this GUI Installer.

How to Install via SSH.

  • 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.3.1 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 Upgrade from FREE to PRO version:

  • Below instructions only apply if using FREE version of this extension.
  • Replace the extension code under 'app/code/WeltPixel/' with the Pro version and run installation Step 3 & 4 again.
  • You will not loose existing banners, sliders and carousels, the upgrade will only activate PRO features of OWL Carousel and Slider.

How to Upgrade the extension.

  • Step 1. Remove extension code under app/code/WeltPixel/OWLCarouselSlider before adding the new extension files. The extension may be refactored and old unused files may cause random issues so it's best to only keep the latest version of the files.
  • Step 2. Follow normal installation instructions above.

How to Create a Banner Slider in Magento?

  • 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.
Magento 2 Banner Slider & Owl Carousel Extension configuration screen general
Magento 2 Banner Slider & Owl Carousel Extension configuration screen WeltPixel Banners Manager
  • a. Go to WeltPixel > Banners for Sliders settings, click on Add New Banner button to create a new banner.
  • b.1 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

Magento 2 Banner Slider & Owl Carousel Extension configuration screen edit banner 1
Magento 2 Banner Slider & Owl Carousel Extension configuration screen edit banner 2
  • ..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 (upload mobile and desktop images), Videos (insert embed iframe) or Custom (insert custom HTML).

      Example of banner type: Video


      <iframe id="ytplayer" type="text/html" width="1400"height="900" 
      src="https://www.youtube.com/embed/4KEBnFEOOv0?autoplay=1" 
      frameborder="0" allow="autoplay; encripted-media" 
      allowfullscreen> </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.
Magento 2 Banner Slider & Owl Carousel Extension configuration screen edit banner 3
Magento 2 Banner Slider & Owl Carousel Extension configuration WeltPixel banners manager 2
  • C. Save the banner and repeat steps 1.a and 1.b until you have created all necessary banners for your slider.

How to Configure your Slider in Magento?

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

By following these steps below you can configure the slider to match your needs.

Magento 2 Banner Slider & Owl Carousel Extension configuration create and configure your slider
Magento 2 Banner Slider & Owl Carousel Extension configuration screen edit slider
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 Carousel 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 banner carousel

    Note: This setting is overwritten by responsive settings

Magento 2 Banner Slider & Owl Carousel Extension configuration screen edit slider 2
Magento 2 Banner Slider & Owl Carousel Extension configuration screen edit slider 3
  • Loop [True / False] - control banner carousel 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.
What are 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.
Magento 2 Banner Slider & Owl Carousel Extension configuration screen slider responsive breakpoints

How to Assign Banners to Your Slider in Magento?

  • 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’.
Magento 2 Banner Slider & Owl Carousel Extension add slider in Magento homepage

How to Add a Slider to a Magento Homepage?

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
Magento 2 Banner Slider & Owl Carousel Extension add slider in Magento homepage
Magento 2 Banner Slider & Owl Carousel Extension configuration advanced settings
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.
Write Your Own Review
You're reviewing:Magento 2 Responsive Banner Slider and OWL Carousel.
Your Rating
Recently Viewed
No recently views items
Clear All
Newsletter Fashion Box
Stay Updated!
Newsletter Fashion Box