顯示空白幻燈片的angular.js光滑輪播

Question

我正在使用angular.js，並使用光滑的輪播。 我在輪播中有大約9個項目，並且僅對樣式進行了一些修改（主要是前后移動上一個/下一個按鈕），而我得到的內容看起來像是4-5張空白幻燈片

這是我漂亮的配置（咖啡腳本）

$scope.firstSlickConfig = {
      arrows: true
      slidesToShow: 5
      rows: 1
      draggable: false
      slidesToScroll: 1
      infinite: true
      dots: false
      variableWidth: true
      responsive: [
        {
          breakpoint: 1450
          settings:
            slidesToShow: 1
            infinite: true
            slidesToScroll: 1
            slidesPerRow: 1
        }
        {
          breakpoint: 960
          settings:
            enabled: true
            draggable: true
            slidesToShow: 3
            slidesToScroll: 1
            rows: 1
            infinite: true
            arrows: true
        }
        {
          breakpoint: 786
          settings:
            enabled: true
            draggable: true
            slidesToShow: 2
            slidesToScroll: 1
            rows: 1
            infinite: true
            arrows: true
        }
        {
          breakpoint: 415
          settings:
            enabled: true
            draggable: true
            slidesToShow: 2
            slidesToScroll: 1
            rows: 1
            infinite: true
            arrows: true
            mobileFirst: true
        }
      ]
    }

有誰知道我該如何擺脫這些“鬼影”幻燈片？

Answer 1

不久前使用Slick滑塊時，我遇到了類似的問題，可能需要花些時間才能弄清楚。

如果兩者都有

infinite: true
variableWidth: true

您可能還想添加

  centerMode: true
  slidesToShow: 1

這可以幫助滑塊回收。 因為您有“要顯示的幻燈片= 5”，所以它將一直持續到顯示5張幻燈片為止。 但是，如果某些幻燈片的寬度不同並且您將其設置為無限，那么根據我的經驗，回收可能是一個問題。 否則，請嘗試關閉無限關閉。

Answer 2

我找到了slick的angular文檔（ https://github.com/devmark/angular-slick-carousel ），並看到了一個可以綁定的event函數。 我有9個占位符元素，所以我把

event:
  afterChange: (event, slick, currentSlide, nextSlide) ->
    if currentSlide == 8
      slick.slickGoTo(1)
    return

肯定很臟，希望它能更好地處理此問題，但目前仍然有效。