Unslider JQuery单击"更改幻灯片"

Question

我正在建立我的投资组合网站,并在案例研究页面上有一个Unslider.com画廊.我希望用户能够单击我自己创建的下一个或上一个按钮,并将类名称调用为.next和.prev.这是我的JQuery代码.

jQuery(document).ready(function($) {

    var slider = $('.gallery').unslider({
        autoplay : true,
        arrows : false,
        nav : false,
        animation : 'fade',
    });

    slider.on('unslider.ready', function() {
        $(".prev").click(function() {
            unslider('animate:prev');
        });
    });

    slider.on('unslider.ready', function() {
        $(".next").click(function() {
            unslider('animate:next');
        });
    });

});

我知道Unslider带有下一个和前一个按钮,但我需要自己做这个以达到预期的效果.任何有关代码无效的建议都将受到赞赏.我知道JQuery点击链接到正确的html元素,因为我尝试在单击元素时向函数添加警报并正确显示警报.

谢谢,杰米

Answer 1

之前没有使用过unlider,但我认为

unslider('animate:next');

和

unslider('animate:prev');

需要是

slider.unslider('next');

和

slider.unslider('prev');

注意:您需要在您创建的滑块变量上引用unslider方法

Answer 2

新答案

我知道 Unslider 带有下一个和上一个按钮，但我需要自己执行此操作才能达到预期效果。

好吧，现在您可能有一些带有图标和自定义文本的漂亮箭头，在这种情况下，正如 @Alex Howes 所说，您可能想要合并自定义功能。

现在，除了使用

slider.unslider('next');

和

slider.unslider('prev');

它不起作用，因为对我来说unslider.ready，事件似乎没有触发，我们无论如何都不需要使用它，只需获取外部功能slider.on('unslider.ready', function() {即可});，它就像一个魅力:)

你的代码看起来像这样......

slider.unslider('next');

slider.unslider('prev');

jQuery(document).ready(function($) {

  var slider = $('.gallery').unslider({
    autoplay: true,
    nav: false,
    arrows: false,
  });
  $(".prev").click(function() {
    slider.unslider('prev');
  });
  $(".next").click(function() {
    slider.unslider('next');
  });

});

希望有帮助:)