MaterializeCSS轮播设置起始图片无效果答案

【问题标题】：MaterializeCSS carousel set start image without effectMaterializeCSS轮播设置起始图片无效果
【发布时间】：2018-11-20 10:45:47
【问题描述】：

我正在尝试在全屏MaterializeCSS 轮播中设置起始位置。我想将它用作全屏模式内的画廊图像查看器。单击图库图像后，modal 将打开，图像滑块应从单击的图像开始。在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。

我非常感谢每一个提示。

【问题讨论】：

也许您应该发布生成的 HTML。不是 PHP。
我看到的唯一方法是单击所选图像后在轮播中动态构建html代码。在这种情况下，所选图像必须是轮播中的第一张图像。

标签： javascript jquery materialize

【解决方案1】：

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

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

【讨论】：