在flickity中实现自动播放

Question

我目前有一个大型卡特尔网站的跟踪主题。它的主页上有一个闪烁的旋转木马。我喜欢这个像幻灯片一样自动播放

我不太了解网络开发-因此我有一个大卡特尔网站的原因。我做了一些零星的修补工作来改变一些次要的事情。对于知道该怎么做的人来说，这似乎是一个简单的修复方法，我甚至不知道把代码放在哪里。有没有人认为他们可以指导盲人？

我找到了轻薄的.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，但我不认为我需要它，因为我对我的网站的旋转木马样式很满意。我可以在我的网站上查看flickity CSS。

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

Answer 1

嗨Joanne看着你的网站和你发布的代码，你必须添加data-flickity='{ "autoPlay": true }'到你想要自动播放的旋转木马中。

因此，以您的网站为例，您需要将其添加到main-carousel：

<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>