CSS3 Transitions

Setup

From update 1.3.2 all transitions styles are moved out from main owl.carousel.css file to owl.transitions.css

Important! CSS3 transition works only in modern browsers that support CSS3 translate3d methods and only with single item on screen.

Use transitionStyle option to set transtion. There are four predefined transitions: "fade", "backSlide", goDown and scaleUp.

You can also build your own transition styles easily. For example by adding "YourName" value transitionStyle: "YourName", owlCarousel will add .owl-YourName-out class to previous slide and .owl-YourName-in to next slide. All transitions require "in" and "out" styles. Look into owl.carousel.css source for details.

• Javascript
• HTML
• CSS

$(document).ready(function() {

  var owl = $("#owl-demo");

  owl.owlCarousel({
    navigation : true,
    singleItem : true,
    transitionStyle : "fade"
  });

});

<div id="owl-demo" class="owl-carousel owl-theme">

  <div class="item"><img src="assets/fullimage4.jpg"></div>
  <div class="item"><img src="assets/fullimage5.jpg"></div>
  <div class="item"><img src="assets/fullimage6.jpg"></div>
  <div class="item"><img src="assets/fullimage7.jpg"></div>
  <div class="item"><img src="assets/fullimage1.jpg"></div>
  <div class="item"><img src="assets/fullimage2.jpg"></div>
  <div class="item"><img src="assets/fullimage3.jpg"></div>

</div>

#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}

More Demos

Bartosz Wojciechowski 2013 / @OwlFonk / email / changelog / donate /