Question

我花了好几个小时试图用Slick.js轮播协调2个不同的指令。我目前正在使用https://github.com/vasyabigi/angular-slick

我已经加载了插件的jquery版本以及index.html中的角度部分。我已经连接了所有内容，因此没有js错误。

根据更详细的jquery文档，我设置了这个：

<slick slides-to-show="1" slides-to-scroll="1">
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</slick>

所以，我看到第一个div和导航按钮 - 什么都不做。

我真正需要做的是设置我自己的“下一步”按钮，所以我添加了一个按钮，但无法弄清楚ng-click将转到下一张幻灯片。根据jQuery文档，它是slickNext所以我试过

<button type="button" ng-click="slickNext">Next</button>

甚至

<button type="button" ng-click="slick-next">Next</button>

什么都没发生。

我在这里缺少什么？

Answer 1

从source code判断。很确定它应该是

<slick ... next-arrow=".selector .to .next-button" prev-arrow=".selector .to .prev-button" >
    ...

Answer 2

您需要使用

<button type="button" ng-click="slickConfig.method.slickNext()">Next</button>

并且在您的控制器中，您需要指定要通过slickConfig加载的光滑，主要是因为它使用此method: {}来实现其功能。

   $scope.slickConfig = {
    autoplay: true,
    method: {},
    event: {
      beforeChange: function (event, slick, currentSlide, nextSlide) {
      },
      afterChange: function (event, slick, currentSlide, nextSlide) {
      }
    }

Angular JS Slick Carousel - 似乎不起作用

2 个答案: