在轻拂中实现自动播放

Question

我目前有一个以Trace为主题的大型卡特尔网站。它有一个轻弹 主页上的轮播。 我希望它像幻灯片一样自动播放

我对Web开发了解不多 - 因此我有一个大型卡特尔网站的原因。我已经做了一些奇怪的修补来改变小事情。 对于知道该怎么做的人来说，这似乎很容易解决，我什至不知道将代码放在哪里。有人认为他们可以指导盲人吗？

我找到了轻拂.CSS和一切看起来都很好...我喜欢它的风格。

这是flickity网站上自动播放页面上的代码：

<!-- Flickity HTML init -->
<div class="carousel" data-flickity='{ "autoPlay": true }'>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>

这就是你需要的JS。// external js: flickity.pkgd.js

flickity网站上也有一些CSS，但我认为我不需要它，因为我对我的网站如何设置轮播样式感到满意。我可以在我的网站上查看轻拂CSS。

www.jadedseas.co.nz 以查看当前幻灯片。

Answer 1

嗨，乔安妮看着您的网站和您发布的代码，您必须将data-flickity='{ "autoPlay": true }'添加到要自动播放的轮播中。

因此，使用您的网站，您需要将其添加到主轮播中：

<div class="carousel carousel-main flickity-enabled is-draggable" ADD HERE tabindex="0" style="height: 100%;">
<div class="flickity-viewport"><div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><a href="/category/necklaces" class="carousel-cell is-selected" style="position: absolute; left: 0%;">
<div class="category-image" style="background-image:url('https://assets.bigcartel.com/product_images/266895101/DSC_3336.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000');"></div>

<div class="category-name">
<div class="category-text">
<div class="category-title">NECKLACES</div>
<div class="category-subtitle">Shop now</div>
</div>
</div>

</a><a href="/category/earrings" class="carousel-cell" style="position: absolute; left: 100%;">
<div class="category-image" style="background-image:url('https://assets.bigcartel.com/product_images/263007329/DSC_3258.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000');"></div>

.
.
.
.
</div></div></div>