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