Components - Content Carousel | Akto - Responsive Multipurpose HTML5 Template

Content Carousel based on popular OWL Carousel.

Available prepared classes for carousel nav: .nav-outside, .nav-rounded
Available prepared classes for carousel dots: .dots-outside, .dots-rounded, .dots-left, .dots-right

You can use the data attributes below to change carousel options.

Available carousel data attributes:

data-items="1".......................(items visible on desktop)
data-items-mobile-portrait="1".......(items visible on mobiles)
data-items-mobile-landscape="1"......(items visible on mobiles)
data-items-tablet="1"................(items visible on tablets)
data-loop="true".....................(true/false)
data-margin="10".....................(space between items)
data-center="false"..................(true/false)
data-start-position="0"..............(item start position)
data-animate-in="fadeIn".............(more animations: http://daneden.github.io/animate.css/)
data-animate-out="fadeOut"...........(more animations: http://daneden.github.io/animate.css/)
data-mouse-drag="true"...............(true/false)
data-autoheight="false"..............(true/false)
data-autoplay="true".................(true/false)
data-autoplay-timeout="5000".........(milliseconds)
data-autoplay-hover-pause="true".....(true/false)
data-autoplay-speed="800"............(milliseconds)
data-nav="true"......................(true/false)
data-nav-speed="800".................(milliseconds)
data-dots="true".....................(true/false)
data-dots-speed="800"................(milliseconds)

Note: CSS3 animations not working on IE 9 and older versions.

basic html markup:

<!-- Begin content carousel (http://www.owlcarousel.owlgraphic.com)
============================ 
* Use class "nav-outside" for outside nav.
* Use class "nav-rounded" for rounded nav.
* Use class "dots-outside" for outside dots.
* Use class "dots-left" or "dots-right" to align dots.
* Use class "dots-rounded" for rounded dots.
* Available carousel data attributes:
		data-items="1".......................(items visible on desktop)
		data-items-mobile-portrait="1".......(items visible on mobiles)
		data-items-mobile-landscape="1"......(items visible on mobiles)
		data-items-tablet="1"................(items visible on tablets)
		data-loop="true".....................(true/false)
		data-margin="10".....................(space between items)
		data-center="false"..................(true/false)
		data-start-position="0"..............(item start position)
		data-animate-in="fadeIn".............(more animations: http://daneden.github.io/animate.css/)
		data-animate-out="fadeOut"...........(more animations: http://daneden.github.io/animate.css/)
		data-mouse-drag="true"...............(true/false)
		data-autoheight="false"..............(true/false)
		data-autoplay="true".................(true/false)
		data-autoplay-timeout="5000".........(milliseconds)
		data-autoplay-hover-pause="true".....(true/false)
		data-autoplay-speed="800"............(milliseconds)
		data-nav="true"......................(true/false)
		data-nav-speed="800".................(milliseconds)
		data-dots="true".....................(true/false)
		data-dots-speed="800"................(milliseconds)
-->
<div class="owl-carousel nav-rounded dots-rounded" data-items="1" data-nav="true">

	<!-- Begin carousel item -->
	<div class="cc-item">
		your content here...
	</div>
	<!-- End carousel item -->

	<!-- Begin carousel item -->
	<div class="cc-item">
		your content here...
	</div>
	<!-- End carousel item -->

	<!-- Begin carousel item -->
	<div class="cc-item">
		your content here...
	</div>
	<!-- End carousel item -->

</div>
<!-- End content carousel -->

animation v.1

Carousel with default animation.

animation v.2

data-animate-in="fadeIn", data-animate-out="fadeOut"

animation v.3

data-animate-in="slideInDown", data-animate-out="slideOutUp"

animation v.4

data-animate-in="zoomInRight", data-animate-out="zoomOutLeft"

nav default

Carousel with default nav.

nav rounded

Used prepared class: .nav-rounded

nav outside

Used prepared class: .nav-outside

nav outside rounded

Used prepared classes: .nav-outside, .nav-rounded

dots default

Carousel with default dots.

dots rounded

Used prepared class: .dots-rounded

dots left

Used prepared class: .dots-left

dots right

Used prepared class: .dots-right

dots outside

Used prepared class: .dots-outside

dots outside rounded

Used prepared classes: .dots-outside, .dots-rounded

caption positions

Use prepared classes: .bottom-left, .bottom-center, .bottom-right, .center-left, .center, .center-right, .top-left, .top-center, .top-right to position carousel caption.

Use prepared classes: .cc-caption-xs, .cc-caption-sm, .cc-caption-lg, .cc-caption-xlg to change caption size.

video content

Carousel with video content.

portfolio carousel

Present your work.

images carousel

Use class .hover-opacity to add hover effect to carousel item.

brands/clients carousel

Use class .hover-opacity to add hover effect to carousel item.

text carousel

Simple text carousel.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quo earum a perferendis libero eos ducimus quod tempora in ullam, beatae, quaerat eligendi laborum! Natus dolore officia fugit nemo consequatur!

components - content carousel

basic html markup:

animation v.1

animation v.2

animation v.3

animation v.4

nav default

nav rounded

nav outside

nav outside rounded

dots default

dots rounded

dots left

dots right

dots outside

dots outside rounded

caption positions

caption bottom left

caption bottom right

caption bottom center

caption center left

caption center right

caption center

caption top left

caption top right

caption top center

caption alternative

video content

portfolio carousel

luctus ac integer

natoque euismod quis

mattis amet nunk

justo tellus estin

vestima itras supra

images carousel

brands/clients carousel

text carousel

akto