Shopping cart is empty.

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.

$(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;
}

Contact Us

We look forward to hearing from you

Ph: (Australia) 02 9818 4200
Glade View, 446 Victoria Rd (Cnr Tennyson Road), Gladesville NSW 2111 AUSTRALIA