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

标签 javascript jquery materialize

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

我非常感谢每一个提示。

最佳答案

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

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

关于javascript - MaterializeCSS 轮播设置启动图像无效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53391289/

相关文章:

javascript - 基于 Javascript 变量值的多个 SVG 动画的设置时间已经过去

javascript - 保持 Bootstrap 侧边菜单可见

css - 使用 vuejs 和 laravel 消除导航栏和旋转木马之间的差距

html - Materialise 预加载器

javascript - 如何根据 React 中同级组件的大小来调整组件的大小?

javascript - 切换隐藏/显示谷歌地图标记

javascript - jQuery/Javascript 替换多次出现不起作用

javascript - 工具提示显示不同元素的相同消息

html - 在没有网格的情况下使用 materialize css 会导致输入占位符未对齐

javascript - ESlint 强制将函数等的右括号与左括号放在同一列上