[英]How to show the next slide when you click on the image in flexslider
I'm using the flexslider plugin and i wanted to know if there is an easy way (apart from changing the core of the plugin which is what i am going to do if i don't find an easy answer) to show the next slide when you click on the current slide. 我正在使用flexslider插件,我想知道是否有一个简单的方法(除了更改插件的核心,这是我将要做的,如果我没有找到一个简单的答案)显示下一张幻灯片当您单击当前幻灯片时。 I set up the flexslider like this
我像这样设置了flexslider
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
I disabled the Prev/Next command because i didn't like them. 我禁用了Prev / Next命令,因为我不喜欢它们。 What should i do?
我该怎么办?
Maybe a little bit too late, but here's the solution for Flexslider 2: 也许有点太晚了,但这是Flexslider 2的解决方案:
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container",
start: function(slider) {
$('.slides li img').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
I had a Safari problem with the code above. 我上面的代码遇到了Safari问题。 This is my easy solution.
这是我的简单解决方案。
jQuery( document ).ready( function( $ ) {
$('.flexslider').on('click', function(){
$(this).find('.flex-next').click();
});
}
$(window).load(function() {
// Slider
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
});
Here's a small update to the accepted answer above that targets the specific slider clicked, rather than all the sliders on the page: 以上是对上面接受的答案的一个小更新,它针对的是点击的特定滑块,而不是页面上的所有滑块:
$('.flexslider').flexslider({
start: function(slider) {
$('.slides li img', slider).click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
After each slider animation completes, find the active slide and change the image src 每个滑块动画完成后,找到活动幻灯片并更改图像src
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
touch: true,
itemWidth: 235,
itemMargin: 10,
after: function (slider) {
$(slider).find('.flex-active-slide').find("img").each(function () {
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.