Question

我尝试使用Unslider创建自定义导航。

点击幻灯片后，我想进入下一张幻灯片。

我是Javascript的新手。我的代码是：

<script>
  jQuery(document).ready(function($) {
    $('.my-slider').unslider({
      arrows:false
    });
  .on('click', function(){
    .unslider('next');
    });
  });
</script>

HTML：

<div class="my-slider">
  <ul>
    <li><img class="img-pad" src="img/img-1.jpg" alt=""></li>
    <li><img class="img-pad" src="img/img-2.jpg" alt=""></li>
    <li><img class="img-pad" src="img/img-3.jpg" alt=""></li>
  </ul>
</div>

我知道这是错的，但没有错。

Answer 1

您错误地使用了.之前的unslider。请记住，点应始终跟在对象之后。单独使用点意味着什么。所以你的onClick函数目前什么都不做，因为它是这样的：

function(){
          .unslider('next');
};

您告诉代码在不存在的实体上调用函数。

请改为尝试：

function(){
     $('.my-slider').unslider('next');
};

虽然这实际上不起作用（因为unslider是初始化方法）。您需要对unslider对象的引用。所以这可行：

function(){
     this.('next');
};

或者您可以阅读文档并使用他们的示例代替：

<script>
    jQuery(document).ready(function($) {

        var slider = $('.my-slider').unslider(
        {
           arrows:false
        });

        slider.on('click', function(){
          slider.unslider('next');
        });
    });

</script>

Answer 2

根据documentation，使用以下代码，而不是对箭头的值使用false：

arrows: {
    //  Unslider default behaviour
    prev: '<a class="custom-control prev">Previous slide</a>',
    next: '<a class="custom-control next">Next slide</a>',

    //  Example: generate buttons to start/stop the slider autoplaying
    stop: '<a class="unslider-pause" />',
    start: '<a class="unslider-play">Play</a>'
}

PS：在tab方法和＆amp;选项

如何向Unslider添加自定义onClick功能，以便进入下一张幻灯片？

2 个答案: