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