magestyle/bannerslider 1.2.0

Magestyle Bannerslider

Type

magento2-module

License

OSL-3.0, AFL-3.0

Requires
  • magento/framework 102.0.*
  • php ~7.1.3||~7.2.0
Requires (dev)

None

Suggests

None

Provides

None

Conflicts

None

Replaces

None

Magestyle Banner Slider

Magento2 banner slider by Magestyle

Using this module, you will be able to use OwlCarousel2 with Magento 2 through requirejs.

Installation

composer require magestyle/bannerslider
bin/magento setup:upgrade

View more - http://magestyle.com/

Usage

OwlCarousel Initialization

Block/CMS Initialization

You can init the slider with data-mage-init:

<div id="your-slider" class="owl-carousel owl-theme" data-mage-init='{
    "OwlCarousel":{
        "items":"1",
        "loop":"true",
        "autoplay":"true",
        "autoplayTimeout":"3000",
        "autoplayHoverPause":"true",
        "dots":"true",
        "nav":"true"
    }
}
'>
<div class="item"><img src="{{media url="wysiwyg/womens/womens-main.jpg"}}" alt="womens-main" /></div>
<div class="item"><img src="{{media url="wysiwyg/mens/mens-main.jpg"}}" alt="mens-main" /></div>
<div class="item"><img src="{{media url="wysiwyg/gear/gear-main.jpg"}}" alt="gear-main" /></div>
<div class="item"><img src="{{media url="wysiwyg/new/new-main.jpg"}}" alt="new-main" /></div>
</div>

Template Initialization

Using x-magento-init:
<script type="text/x-magento-init">

<div id="your-slider" class="owl-carousel owl-theme">
    <img src="banner-image-1.jpg" />
    <img src="banner-image-2.jpg" />
    <img src="banner-image-3.jpg" />
    <img src="banner-image-4.jpg" />
</div>

<script type="text/x-magento-init">
     {
         "#your-slider": {
             "OwlCarousel": {
                "items":"4",
                "loop":"true",
                "autoplay":"true",
                "autoplayTimeout":"4000",
                "autoplayHoverPause":"true",
                "dots":"true",
                "nav":"true",
                "responsiveClass":"true",
                "responsive":{
                    "0":{
                        "items":"1"
                    },
                    "640":{
                        "items":"2"
                    },
                    "768":{
                        "items":"3"
                    },
                    "1024":{
                        "items":"4"
                    }
                }
             }
         }
     }
 </script>

OwlCarousel Themes

This module loads only the base css from OwlCarousel by default.
If you need to add Owl Carousel Themes, you can include in your theme's layout xml as follows.
You can add it to your Magento 2 theme's default layout default.xml or whatever layout file under head section.

Example: Magento_Theme/layout/default.xml

    <head>
        <css src="Magestyle_Bannerslider::css/owl.theme.default.min.css" />
    </head>

Quick Links

Versions