Wallogit.com
2017 © Pedro Peláez
, (*1)
This module lets you use OwlCarousel2 with Magento 2 through requirejs., (*2)
composer require msp/owlcarousel2 bin/magento setup:upgrade
You can init the slider with data-mage-init:, (*3)
<div id="your-slider" class="owl-carousel" data-mage-init='{
"OwlCarousel": {
"autoPlay" : true,
"autoplayTimeout" : 1500,
"loop" : true,
"items" : 1,
"dots" : false
}
}'>
<img src="kitten1.jpg" />
<img src="kitten2.jpg" />
<img src="kitten3.jpg" />
<img src="kitten4.jpg" />
</div>
or with a <script type="text/x-magento-init">:, (*4)
<div id="your-slider" class="owl-carousel">
<img src="kitten1.jpg" />
<img src="kitten2.jpg" />
<img src="kitten3.jpg" />
<img src="kitten4.jpg" />
</div>
<script type="text/x-magento-init">
{
"#your-slider": {
"OwlCarousel": {
"autoplay" : true,
"autoPlayTimeout" : 1500,
"loop" : true,
"items" : 1,
"dots" : false
}
}
}
</script>
This module loads only the base css from OwlCarousel, but no theme.
The default theme is included, and you can add it to your theme layout default.xml (or whatever layout file) with:, (*5)
...
<head>
...
<css src="Msp_OwlCarousel2::css/owl.theme.default.min.css" />
...
</head>
...
OSL 3.0 OSL-3.0
OSL-3.0
OSL 3.0
OSL 3.0
OSL 3.0
OSL 3.0
OSL 3.0
OSL 3.0