Abstract: Owl Carousel is one of the popular jQuery plugins that lets you create a beautiful responsive carousel slider. It has been used for many website application systems. At present, the latest version of Owl Carousel 2 was released. However, there is a shortage for Owl Carousel animation functionality. For now, the plugin did not support one direction sliding animation well when the data lazy loading. The article will provide one way to solve this problem by custom code.
1. Introduction
Neither the old Owl Carousel nor the latest Owl Carousel supports the one direction sliding animation well when we need to create the carousel slider panel dynamically. The default implementation of one direction sliding animation for Owl Carousel plugin is to copy the first and last slider panel. When it want to slide back to the first slider panel, it actually slide to the copied panel and then jump to the real first one after the animation completes. However, if you try to dynamically create the slider panel, the Owl Carousel will take a wrong behavior. It will still copy the empty one. Because you have not created the panel. So you will see the strange blank content sliding. My way is to start animation after the slider panel ready.
2. Set Signal
At first, you need to set several status signal for every part of data you want to load and create. For example, I need to display four parts of the content in the carousel component of a web page. For the first one, I need first to load the data and paint the first slider panel according to data later. So we need a status variable with false as a default value. Then you need to be set its value to true after data ready.
3. Initialize the animation configuration
After setting status signal, we need to initialize the animation configuration properties. The following properties are required:
• Step Length: the slider panel count at once sliding animation.
• Positions: all slider panel offset positions.
• Current Item: the current slider panel index.
• Speed: the sliding speed time.
All the property values can be fetched by the Owl Carousel plugin API: $(“. “).data(‘owlCarousel’).
4.Register AfterMove and AfterUpdate events
After the initialization the animation configuration, we need to register the AfterMove and AfterUpdate events of Owl Carousel plugin. In that event handler, we need to update the animation configuration again and again. Therefore, we can get the latest status of plugin and take the relative animation behavior next time:
afterUpdate: function () {
ns.animation.setup($(“”).data(‘owlCarousel’));
},
afterMove: function () {
ns.animation.setup($(“”).data(‘owlCarousel’));
}
5.Create Timer
After all above work completes, the most important thing is to create the animation by Owl Carousel plugin. First, you need to create an interval with sliding speed time plus 2 seconds as time out. Then you need to check the status signal of data loading. If the data ready, then you can copy the panel and run the animation. When the plugin is slide to the last panel, you should create a custom animation in non-IE chrome like the following:
$(“.container .owl-wrapper-outer .owl-wrapper”).css({
“transition”: “all 2000ms ease”,
“transform”: “translate3d(“ +
self.options.positions[self.options.positions.length – 1] + “px, 0px, 0px)”
});
setTimeout(function () {
$(“. container “).data(‘owlCarousel’).jumpTo(0);
}, 2000)
For IE, it should be like this:
$(“. container.owl-wrapper-outer .owl-wrapper”).animate({
left: self.options.positions[self.options.positions.length – 1]
}, 2000, function () {
$(“. container “).data(‘owlCarousel’).jumpTo(0);
});
6.Conclusion
If you have finished all above steps, you have a nice one sliding animation for Owl Carousel.
