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