滑動輪播重複錯誤

我正在嘗試使用CSS轉換來使旋轉木馬中的中心對象具有更多的焦點/注意力。（Carousel is Slick.js）滑動輪播重複錯誤

一切都很好，除了當我從最後一個項目返回到第一個項目時，出現了一個暫停和跳轉。

這是什麼造成的？我如何解決它？

//pseudo code

編輯：這也恰好會從第一個到最後。

編輯2：值得一提的是我從該網站Slick.js的想法：http://kenwheeler.github.io/slick/

在頁面與「中心模式」例如，它使用變換做這個確切的事情。除了目標元素之外，我不能爲了我的生活找出不同之處。

編輯3：我的確嘗試將我的元素更改爲H3元素，如示例中所示。不用找了。

來源

2016-11-23 Wesley

原因在於，當從「first to last」切換時，Slick會更改幻燈片元素的DOM順序。當dom元素被刪除並添加回去時，轉換不會啓動...您可以通過使用javascript和Slicks beforeChange和afterChange事件來解決此問題，而不是純粹的CSS解決方案。我舉了一個例子，雖然我做的例子也稍微改變了效果（中間的幻燈片不會變寬，直到它在中間，例如變化後）。也許用Slicks，下一個和上一個幻燈片參數可以使它像你的例子一樣工作，沒有時間去更多地研究它。

https://jsfiddle.net/6d91cqoq/2/

更改您的例子進行：

//Added my own "active" class, so it does not to interfere with slicks active class 
.slick-slide.active { 
    opacity: 1; 
    transform: scale(1.50); 
}

//make current center active after initialization 
$('.slick-center').addClass('active'); 

//before slide change, make all "inactive" 
$('.center').on('beforeChange', function(event, slick, index){ 
    $('.slick-slide').removeClass('active'); 
}); 

//after change make the center one "active" 
$('.center').on('afterChange', function(event, slick, index){ 
    $(slick.$slides[index]).addClass('active'); 
});

來源

2016-11-23 17:57:02 reinder

滑動輪播重複錯誤

回答

相關問題