OwlCarousel in TYPO3 einbinden und konfigurieren
Scripte via typoscript einbinden
page {
includeCSS {
owlcarousel = EXT:myext/Resources/Public/JavaScript/Lib/OwlCarousel/dist/assets/owl.carousel.min.css
owlcarousel_theme = EXT:myext/Resources/Public/JavaScript/Lib/OwlCarousel/dist/assets/owl.theme.default.min.css
# include custom-css
}
includeJSFooter {
owlcarousel = EXT:myext/Resources/Public/JavaScript/Lib/OwlCarousel/dist/owl.carousel.min.js
# include custom-js
}
}
Template anpassen
<div class="owl-carousel">
<div class="owl-item"> Your Content </div>
<div class="owl-item"> Your Content </div>
<div class="owl-item"> Your Content </div>
...
<div class="owl-item"> Your Content </div>
<div class="owl-item"> Your Content </div>
</div>
Carousel via jquery ansprechen und konfigurieren
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
});
});