是否可以动态地将幻灯片添加到现有的Materialise Carousel？

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();
}