Magento 2 Responsive Banner Slider and OWL Carousel.

Rating:
95%
$0.00
Links
$0.00
$0.00  Free version $99.00  Pro version

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.

3 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 carosuel
  • 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

weltpixel
weltpixel

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

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.3.0. 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
    app/code/WeltPixel/MobileDetect (for PRO version only)
  • 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 module:enable WeltPixel_MobileDetect --clear-static-content (for PRO version only)
    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 create a Magento 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.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

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 (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.
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 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

weltpixel
weltpixel
  • 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.
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 : How to add slider in 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
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 v.1.8.0 - December 8, 2018

  • Added Slide By functionality (PRO Version only) - Single or multiple item slide on Carousel scroll.
  • Fixed a bug where the 'Select All' action in Magento Admin was not applying to Banner Slider grid in Admin.
  • Compatibility adjustments for Magento 2.1.16/2.2.7/2.3.0.
  • PHP 7.2 compatibility added.
  • As Magento 2.3 comes with major core changes, we have provided a different set of files in order to achieve the best performance on each version.


What’s new in v.1.7.5 - October 24, 2018

  • Optimization - use the mobile image as fallback if no desktop image is used.
  • Fixed bug - now you can disable slider from slider grid in admin panel.
  • Added cache lifetime parameter to widget in order to avoid out of stock products showing up in carousel - re-add widget to page to receive this fix - it is not enough to update the extension.
  • Added detailed error messages for invalid licenses for an easier identification of the cause.
  • License improvements, added *.magento.cloud as a valid test domain for Enterprise Cloud environments. Now both ‘magentosite.cloud’ and ‘magneto.cloud’ can be used for testing purpose with the production domain license.


What’s new in v.1.7.4 - September 25, 2018

  • Fixed carousel and sliders arrows (design) for IE11 and Edge browsers.
  • Admin menu styling to fit screen size 1366px.
  • Fix for production mode with merged JS - missing color pallet display now fixed.


What’s new in v.1.7.3 - August 23, 2018

  • New feature: Banners are now reusable in multiple Sliders (Pro feature).
  • New feature: OWL Best sell carousel - added option to select period for best sell statistics day, week, month, year, all time. (Pro feature).
  • Fixed banner preview in Magento admin, keep original ratio (both Free and Pro).
  • License improvements, adding *.magento.cloud as a valid test domain.


What’s new in v.1.7.2 - August 2, 2018

  • Fixed currency cache issue.
  • Mobile optimizations.
  • Best seller carousel max items limit now working.
  • Fixed admin random logout issue.
  • Licensing improvements, allowing 3 letter domain as valid domain.


What's new in v.1.7.1 - July 11, 2018

  • Compatibility with Magento 2.2.5 both Open Source & Commerce Cloud B2B.
  • Added domain.test & [any_subdomain].domain.test to the list of valid urls for staging/development environments. Added domain validation with port number included for licensing purpose.
  • Added licensing compatibility with Magento B2B.


What’s new in v.1.7.0 - July 5, 2018

  • Recently viewed widget optimization, widget loaded even if not added to homepage.
  • Optimized image loading for banners, mobile image not showed anymore in desktop view.
  • Added option to enable/disable WeltPixel admin notifications.
  • Show store and server related information under debugging tab: Magento Mode, Magento Edition, Server User, Magento Installation Path, Current server time, Latest cron jobs.
  • Added licensing, license key needs to be generated under weltpixel.com account for purchased product, based on domain name and added under your magento installation.


What’s new in v.1.6.4 - May 16, 2018

  • Compatibility with Magento 2.2.4, logger broken reference fix, changed to rewrite from plugin.
  • Recently viewed products now showing in carousels when full page cache is enabled.
  • Recently viewed products now showing in carousels even for guest users.


What’s new in version 1.6.3 - April 10, 2018

  • OWL Carousel and Slider PRO: Configurable products are now included and showing up in OWL Best Sell Carousel.

What’s new in version 1.6.2 - March 23, 2018

  • OWL Carousel and Slider Pro: Banner link click configured in admin now available also on banner title and description.
  • Design and shadow bug fix for cross sell products to match the rest of the carousels..
  • Center Add to cart, wishlist, compare buttons on carousels
  • Redesign for slider and carousel left/right arrows.

What’s new in version 1.6.0 - March 1st, 2018

  • Change image resolution in carousels from 240x300px to 480x600px to avoid image quality loss.

What’s new in version 1.5.8 - January 12, 2018

  • Added version control for installed WeltPixel modules, including latest version check.
  • Fixed visibility of last carousel item if Stage Padding is grater than 0.
  • Fixed Stage Padding save issues.
  • Fixed errors for null config values.
  • OWL carousels, fix for image size generation.
  • Fixed configurable products swatch change and hover image switch.
  • Removed duplicated general carousel config options, now available only on breakpoint level in order to avoid confusion and improve usability.
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