既存のマテリアライズ・カルーセルにスライドを動的に追加できますか？

Question

hereのようにカルーセルを作成することができます。カルーセルが現れ、正しく動作します。

後で私は、追加のスライドを追加したいと思います：
$(".carousel").append('<a class="carousel-item active" href="#six!"><img src="http://lorempixel.com/250/250/nature/6"></a>');

しかし、これはスライドがカルーセルに追加されませんように動作するためには表示されません。

サポートされていない初期化カルーセルにスライドを追加していますか、これが私の目的ですか？

Answer 1

ありがとうございます。私はインターネットで何も解決策を見ていない。私はより良いとスムーズな解決策があるかもしれないと信じていますが、これは私のものです。

あなたがする必要があることは、新しいアイテムを追加した後に、既に初期化されたメインカルーセルdivから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/

Answer 2

私は同じ問題を抱えていたが、私は、スライダを使用しています。 （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(); 
}