javascript - MaterializeCSS 轮播设置启动图像无效果

Question

我正在尝试在全屏 MaterializeCSS 轮播中设置起始位置。我想将它用作全屏模式内的图库图像查看器。 单击图库图像后，模态 打开，图像 slider 应从单击的图像开始。在 MaterializeCSS 的文档中，我找不到任何重要的信息。

目前轮播滑动到右边的图片。我只想删除 on start 的幻灯片效果，并在查看第一张图片后激活它。

要打开的许多图片中的两张:

<div class="gallery-item-left col s12 m6">
    <img class="responsive-img gallery-item" alt="gallery-image-1" data-position="1" src="...path-to-image-1..." />
</div>
<div class="gallery-item-right col s12 m6">
    <img class="responsive-img gallery-item" alt="gallery-image-2" data-position="2" src="...path-to-image-2..." />
</div>
...

我的 jQuery 代码

jQuery(document).ready(function($) {
    $('body').on('click', '.gallery-item', function() {
        var position = $(this).data('position');
        $('#img-viewer-modal').modal('open');
        $('#img-viewer-carousel').carousel({fullWidth: true, duration: 400});
        $('#img-viewer-carousel').carousel('set', [position - 1]);
});

#img-viewer-carousel 只是我模态中的轮播 ID。

我非常感谢每一个提示。

Answer 1

我发现的唯一解决方法是动态更改轮播的内容项。

请参阅 https://www.codeply.com/go/EiubFqcKcg 下的示例