CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
chris
chris

Reputation: 61

Add Autoplay to this JS Slider

I've implemented this cool 3d slider but don't know how to add autoplay to cycle through the slides. Any suggestions? Here is the link to the codepen below. I've included some of the HTML snippets but not the any of the CSS or javascript because I couldn't get it to format properly.

https://codepen.io/paulnoble/pen/yVyQxv

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

Upvotes: 0

Views: 704

Answers (2)

dysfunc
dysfunc

Reputation: 2008

This will enable autoplay but also allow you to jump indexes and continue autoplay from that whatever index you're on

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

Upvotes: 1

jonathanbell
jonathanbell

Reputation: 2637

Just call the spin() function inside an interval.

setInterval(spin, 3000);

Place this after the call to init() at the bottom of the code on CodePen.

Upvotes: 0

Related Questions