[英]Add animation on next and previous button in OwlCarousel using animate.css on clicking
我的问题是我想通过单击轮播的next
和previous
按钮来为我的幻灯片设置动画,但动画将在下一个和上一个中更改。
这是我的 HTML 代码:
<div class="col-12 col-lg-5 text-center review-box">
<div class="row no-gutters reviews-testimonial owl-carousel owl-theme">
<div class="reviews item">
<div class="review-body">
<p class="user-comment">Click edit button to change this text. Lorem dolor sit amet, sit consectetur elit. amet, for adipiscing elit. amet, consect adipiscing elit.</p>
<p class="comment-date">19-dec-2020</p>
<ul class="review-stars">
<li><a href="#"><i class="las la-star"></i></a></li>
<li><a href="#"><i class="las la-star"></i></a></li>
<li><a href="#"><i class="las la-star"></i></a></li>
<li><a href="#"><i class="las la-star"></i></a></li>
<li><a href="#"><i class="las la-star"></i></a></li>
</ul>
</div>
<div class="user-img"><img src="innovative/img/review.jpg" class="rounded-circle"></div>
<h4 class="user-name">Mickal Devid</h4>
<p class="user-designation">- Web Designer -</p>
</div>
<div class="reviews item">
<div class="review-body">
<p class="user-comment">Edit button to change this text. Lorem dolor sit amet, sit consectetur elit. amet, for adipiscing elit. amet, consect adipiscing elit.</p>
<p class="comment-date">19-dec-2020</p>
<ul class="review-stars">
<li><a href="#"><i class="las la-star"></i></a></li>
<li><a href="#"><i class="las la-star"></i></a></li>
<li><a href="#"><i class="las la-star"></i></a></li>
<li><a href="#"><i class="las la-star"></i></a></li>
<li><a href="#"><i class="las la-star"></i></a></li>
</ul>
</div>
<div class="user-img"><img src="innovative/img/rev.jpg" class="rounded-circle"></div>
<h4 class="user-name">Mickal Devid</h4>
<p class="user-designation">- Web Designer -</p>
</div>
</div>
<a class="navigate-btn prev-review-btn"><span class="fly-line"></span>Prev <i class="las la-arrow-right"></i> </a>
<a class="navigate-btn next-review-btn"><span class="fly-line"></span>Next <i class="las la-arrow-right"></i></a>
</div>
我的 JavaScript:
这是我的 JavaScript 脚本,我正在初始化我的reviews-testimonial
。 我还添加按钮next
和prev
custom 我想放置我的动画。
$('.reviews-testimonial').owlCarousel({
loop: true,
margin: 20,
slideSpeed: 5000,
slideTransition: 'fade',
//animateOut:'slideOutDown',
//animateIn:'slideInDown',
nav: false,
dots: false,
responsive: {
0: {
autoplay: true,
autoplayTimeout: 8000,
autoplayHoverPause: true,
items: 1
},
600: {
items: 1
},
1000: {
items: 1
},
}
});
$('.next-review-btn').click(function () {
var owl = $('.reviews-testimonial');
owl.owlCarousel();
// slider animation
owl.trigger('next.owl.carousel');
});
$('.prev-review-btn').click(function () {
var owl = $('.reviews-testimonial');
owl.owlCarousel();
// slider animation
owl.trigger('prev.owl.carousel');
});
每次单击下一个或上一个按钮时,您都会重新初始化您的轮播,而您不必这样做。 全局初始化您的滑块,并在点击处理程序中使用owl
变量来触发动画。
var owl = $('.reviews-testimonial');
owl.owlCarousel();
$('.next-review-btn').click(function() {
// slider animation
owl.trigger('next.owl.carousel');
});
$('.prev-review-btn').click(function() {
// slider animation
owl.trigger('prev.owl.carousel');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.