Question

我已经实现了这个很酷的3d滑块，但是不知道如何添加自动播放来循环播放幻灯片。有什么建议么？这是下面代码库的链接。我提供了一些HTML代码段，但没有提供任何CSS或JavaScript代码段，因为我无法正确设置其格式。

<div class="carousel">
<div class="carousel__control">
</div>
<div class="carousel__stage">
    <div class="spinner spinner--left">
        <div class="spinner__face js-active" data-bg="#27323c">
            <div class="content" data-type="iceland">
                <div class="content__left">
                    <h1>ICELAND<br><span>EUROPE</span></h1>
                </div>
                <div class="content__right">
                    <div class="content__main">
                        <p>“As I flew north to begin my third circuit of Iceland in four years, I was slightly anxious. The number of visitors to Iceland has doubled in that period, and I feared this might mean a little less magic to go around. At the end of this trip, 6000km later, I'm thrilled to report that the magic levels remain high. It's found in glorious football victories and Viking chants, kayaking among icebergs, sitting with puffins under the midnight sun and crunching across brand-new lava fields.” </p>
                      <p>– Carolyn Bain</p>
                    </div>
                    <h3 class="content__index">01</h3>
                </div>
            </div>
        </div>
        <div class="spinner__face" data-bg="#19304a">
            <div class="content" data-type="china">
                <div class="content__left">
                    <h1>CHINA<br><span>ASIA</span></h1>
                </div>
                <div class="content__right">
                    <div class="content__main">
                        <p>“Its modern face is dazzling, but China is no one-trick pony. The world's oldest continuous civilisation isn't all smoked glass and brushed aluminium and while you won't be tripping over artefacts – three decades of round-the-clock development and rash town-planning have taken their toll – rich seams of antiquity await.”</p>
                      <p>– Damian Harper</p>
                    </div>
                    <h3 class="content__index">02</h3>
                </div>
            </div>
        </div>
        <div class="spinner__face" data-bg="#2b2533">
            <div class="content" data-type="usa">
                <div class="content__left">
                    <h1>USA<br><span>NORTH AMERICA</span></h1>
                </div>
                <div class="content__right">
                    <div class="content__main">
                        <p>“When it comes to travel, America has always floored me with its staggering range of possibilities. Not many other countries have so much natural beauty – mountains, beaches, rainforest, deserts, canyons, glaciers – coupled with fascinating cities to explore, an unrivaled music scene and all the things that make travel so rewarding (friendly locals, great restaurants and farmers markets, and plenty of quirky surprises).” </p>
                      <p>– Regis St Louis</p>
                    </div>
                    <h3 class="content__index">03</h3>
                </div>
            </div>
        </div>

</div>

Answer 1

这将启用自动播放功能，但也允许您跳过索引，并从所处的索引状态继续自动播放

const autoplay = () => {
  const max = $controls.length;

  setInterval(() => {
    // use the internal activeIndex to track
    $controls.eq(activeIndex).next().click();

    if(activeIndex + 1 === max){
       $controls.eq(0).click();
    }
  }, 3000); 
}

const init = () => {
    assignEls()
    prepareDom()
    attachListeners()
    autoplay()
}

DEMO

Answer 2

只需在一个间隔内调用spin()函数。

setInterval(spin, 3000);

将其放置在对CodePen上代码底部的init()的调用之后。

将自动播放添加到此JS滑块

2 个答案: