CSS Flexslider 自定义下一个/上一个按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18239432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:57:03  来源:igfitidea点击:

Flexslider Custom Next / Previous Buttons

cssslidercarouselflexslider

提问by pealo86

I used to use the jQuery Cycle plugin as I liked how easy it was to customise, such as inserting custom HTML elements of my choice and simply assigning them 'next' or 'previous' button functionality.

我曾经使用 jQuery Cycle 插件,因为我喜欢它的轻松定制,例如插入我选择的自定义 HTML 元素并简单地为它们分配“下一个”或“上一个”按钮功能。

I can't find a way to do this in Flexslider however, I only see an option for custom pagination. E.g. manualControls.

但是,我在 Flexslider 中找不到执行此操作的方法,我只能看到自定义分页的选项。例如manualControls

Does anyone know of a way to do this in Flexslider? E.g. set an image or anchor as a 'next' button.

有没有人知道在 Flexslider 中做到这一点的方法?例如,将图像或锚点设置为“下一步”按钮。

回答by drip

How about something like this:

这样的事情怎么样:

$('.slider').flexslider({
    directionNav: false,
    controlNav: false
})

$('.prev').on('click', function(){
    $('.slider').flexslider('prev');
    return false;
})

$('.next').on('click', function(){
    $('.slider').flexslider('next');
    return false;
})

Demo

演示

Or if you don't wan't to write it 2 times, you can do this too:

或者如果你不想写两次,你也可以这样做:

$('.slider').flexslider({
    directionNav: false,
    controlNav: false
})

$('.prev, .next').on('click', function(){
    var href = $(this).attr('href');
    $('.slider').flexslider(href);
    return false;
})      

Demo v2

演示 v2