是否可以將幻燈片動態添加到現有的Materialise Carousel中？

我能夠按照here所述創建輪播。旋轉木馬出現並正常工作。是否可以將幻燈片動態添加到現有的Materialise Carousel中？

後來我想增加一個額外的幻燈片：
$(".carousel").append('<a class="carousel-item active" href="#six!"><img src="http://lorempixel.com/250/250/nature/6"></a>');

然而，這似乎並沒有工作，因爲幻燈片沒有得到添加到轉盤。

是否將幻燈片添加到不支持的初始化輪播中，或者這是我的最終目標？

來源

2016-09-08 Pavel Potoplyak

當然可以。我在互聯網上沒有看到任何解決方案。我相信可能會有更好，更順利的解決方案，但這個是我的。

所有你需要做的是將你的新項目從已初始化主轉盤格刪除initialized類，並重新初始化之後。

//init carousel 
var slider = $('.carousel'); 
slider.carousel(); 

//add a new item 
slider.append('<a class="carousel-item active" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>'); 

//remove the 'initialized' class which prevents slider from initializing itself again when it's not needed 
if (slider.hasClass('initialized')){ 
    slider.removeClass('initialized') 
} 

//just reinit the carousel 
slider.carousel();

完整的工作小提琴：https://jsfiddle.net/8tq4ycm3/

來源

2016-09-09 05:41:50 Luke

輝煌，謝謝！這裏是一個基於你的解決方案的[小提琴]（https://jsfiddle.net/wavtace7/1/），但用更快的加載圖像來顯示效果。 –

謝謝你！真的很有幫助。 –

@PavelPotoplyak有沒有辦法維持以前的狀態？當您重新初始化它時，滑塊會轉到第一張幻燈片。有什麼辦法可以得到我們的幻燈片嗎？ –

我有同樣的問題，但我使用滑塊。（http://materializecss.com/media.html#slider）

要解決這個問題，有必要明確所有項目，重新添加項目用新的，然後重新綁定滑塊。

關注例如：https://codepen.io/troits/pen/QvdZov

let itens = []; 
function addItem(){ 
    $('.slides').empty(); 
    $('.slider > .indicators').detach(); 

    itens.push(createItem()); 

    for(i in itens){ 
    $('.slides').append(itens[i]); 
    } 

    $('.slider').slider(); 

    showItem(i); 
} 

function showItem(i){ 
    $('.slider > .indicators > .indicator-item')[i].click(); 
}

來源

2017-04-27 12:43:55

是否可以將幻燈片動態添加到現有的Materialise Carousel中？

回答

相關問題