时间戳

首页 > 解决方案 > MaterializeCSS轮播设置起始图片无效果

javascript - MaterializeCSS轮播设置起始图片无效果

问题描述

我正在尝试在全屏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。

我非常感谢每一个提示。

标签： javascriptjquerymaterialize

解决方案

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

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

推荐阅读