magespecialist / M2 Msp_owlcarousel2
Licence: osl-3.0
This module lets you use OwnCarousel2 with Magento 2 throught requirejs
Stars: β 16
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to M2 Msp owlcarousel2
Flutter Intro Slider
Simple and configurable app introduction slider for Flutter
Stars: β 461 (+2781.25%)
Mutual labels: slider
React Native Onboarding Swiper
π³ Delightful onboarding for your React-Native app
Stars: β 596 (+3625%)
Mutual labels: slider
React Native Circular Slider
React Native component for creating circular slider π
Stars: β 716 (+4375%)
Mutual labels: slider
React Range
ποΈRange input with a slider. Accessible. Bring your own styles and markup.
Stars: β 545 (+3306.25%)
Mutual labels: slider
Hooper
π A customizable accessible carousel slider optimized for Vue
Stars: β 561 (+3406.25%)
Mutual labels: slider
Slideview
An awesome sliding button library for Android.
Stars: β 683 (+4168.75%)
Mutual labels: slider
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: β 786 (+4812.5%)
Mutual labels: slider
Glide
A dependency-free JavaScript ES6 slider and carousel. Itβs lightweight, flexible and fast. Designed to slide. No less, no more
Stars: β 6,256 (+39000%)
Mutual labels: slider
Emojislider
π€― A slider widget rich in emoji and highly customisable.
Stars: β 549 (+3331.25%)
Mutual labels: slider
React Compound Slider
βΎοΈ React Compound Slider | A small React slider with no opinion on markup or styles
Stars: β 553 (+3356.25%)
Mutual labels: slider
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: β 29,519 (+184393.75%)
Mutual labels: slider
Banner Slider
Banner slider is an easy to use library for implement image sliders in android apps.
Stars: β 482 (+2912.5%)
Mutual labels: slider
Slidetoact
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin π±π¨π¦
Stars: β 783 (+4793.75%)
Mutual labels: slider
Before after
A flutter package which makes it easier to display the difference between two images.
Stars: β 453 (+2731.25%)
Mutual labels: slider
React Slider
Accessible, CSS agnostic, slider component for React.
Stars: β 627 (+3818.75%)
Mutual labels: slider
Vue Concise Slider
vue-concise-slider,A simple vue sliding component
Stars: β 831 (+5093.75%)
Mutual labels: slider
Gravityslider
π GravitySlider is a beautiful alternative to the standard UICollectionView flow layout.
Stars: β 784 (+4800%)
Mutual labels: slider
React Zmage
δΈδΈͺεΊδΊ React ηε―ηΌ©ζΎεΎηζ§δ»Ά | A scalable image wrapper power by react
Stars: β 713 (+4356.25%)
Mutual labels: slider
Magento 2 OwlCarousel2 module
This module lets you use OwlCarousel2 with Magento 2 through requirejs.
Installation
composer require msp/owlcarousel2
bin/magento setup:upgrade
Usage
Initialization
You can init the slider with data-mage-init:
<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">:
<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>
OwlCarousel theme css
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:
...
<head>
...
<css src="Msp_OwlCarousel2::css/owl.theme.default.min.css" />
...
</head>
...
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].