是否可以将幻灯片动态添加到现有的 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 class 并重新初始化它。

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

全职工作fiddle：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();
}

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

Is it possible to dynamically add a slide to an existing Materialize Carousel?

materialize