angular.js光滑旋轉木馬顯示空白幻燈片

我正在使用angular.js並利用光滑的旋轉木馬。我在旋轉木馬中有大約9個項目，並且只是略微修改了樣式（主要是移動了前一個/下一個按鈕），並且我看到了一些看起來像4-5空白幻燈片的東西。（coffeescript）angular.js光滑旋轉木馬顯示空白幻燈片

$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 
     } 
     ] 
    }

沒有人知道我能如何擺脫這些'鬼'幻燈片？

來源

2016-09-01 James N

我找到了slick的角度文檔（https://github.com/devmark/angular-slick-carousel），並看到了一個event函數，我可以把它放進去。我有9個佔位符元素，所以我只是把

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

絕對髒，並希望它處理得更好，但它現在的作品。

來源

2016-09-01 19:15:47

我不久前在使用滑動滑塊時遇到了類似的問題，並且可能需要一點兒擺弄才能正確使用。

如果你有兩個

infinite: true 
variableWidth: true

您可能還需要添加

centerMode: true 
    slidesToShow: 1

，它可以幫助滑塊循環。因爲你有「幻燈片顯示= 5」，它會一直持續到最後顯示5張幻燈片。但是，如果某些幻燈片的寬度不同，並且您將其設置爲無限大，則回收可能會成爲我的經驗問題。否則，請嘗試關閉無限。

來源

2016-09-01 00:24:40 Whirlwind991

感謝您的回答，但不幸的是，沒有做太多:( –

是的，它可能需要一些擺弄設置才能得到正確的。我看到你必須添加額外的項目來修復它，這是一個如果你喜歡，你可以把它放在一個jsfiddle或什麼東西，我可以看看它更好 – Whirlwind991

雅這是令人討厭的另一個問題，我已經注意到，是我會調整的東西，一切都會中斷。例如，它看起來好像早些時候用額外的圖像工作得很好，現在它又被打破了，它可能是我的容器的寬度，它放在'1000px' +寬的位置，但它仍然不起作用正確的，現在我有一個巨大的空白區域內的旋轉木馬 –

angular.js光滑旋轉木馬顯示空白幻燈片

回答

相關問題