是否可以将幻灯片动态添加到现有的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中？

回答

相关问题