Zum Hauptinhalt springen Skip to page footer

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
    }
}
setup.typoscript

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
        	}
    	}
	});
});