Owl carousel widget structure

Landing page sections using owl carousel in many section like intro, sliders, testimonials etc. Below is basic overview of carousel widget structure with available options which is used in landing pages.

<div class="carousel-widget ctrl-1" 
	data-items="1"
	data-itemrange="false"
	data-autoplay="true" 
	data-loop="true"
	data-nav="true">

	<div class="owl-carousel">
		<!-- Item block -->
		<div class="item">
			...
		</div>
		<!-- Item block -->
		<div class="item">
			...
		</div>
	</div>
</div>

All available options apply using data attribute as example display in above code

  • data-center=”false” : Default value false, Display item center align.
  • data-stpd=”0″ : Default value 0, Padding around slider wrapper.
  • data-items=”5″ : Default value 5, Number of items to display in row.
  • data-margin=”0″ : Default value 0, Space between items.
  • data-nav=”false” : Default value false, Navigation arrows.
  • data-pager=”false” : Default value false, Pagination dots.
  • data-itemrange=”0,1|420,2|600,3|768,3|980,4″ : Items display in responsive screens.
  • data-out=”fadeOut” : Default value ‘fadeOut‘, Set false to apply slide default animation, Animate CSS class value
  • data-in=”fadeIn” : Default value ‘fadeIn‘, Set false to apply slide default animation, Animate CSS class value
  • data-autoplay=”false” : Default value false, Auto play slider.
  • data-timeout=”3000″ : Default value 3000, Slier interval.
  • data-hstop=”true” : Default value true, Stop auto play slider on mouse hover.
  • data-loop=”false” : Default value false

 

 

Related Articles