Carousel: Play Pause

<h2 class="mt-24">Carousel Play/Pause</h2>
<div id="example-play-pause" class="splide">

    <div class="splide__autoplay">
        <button class="splide__play">Play</button>
        <button class="splide__pause">Pause</button>
    </div>

    <div class="splide__slider">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">
                    <article class="person-card">
                        <img class="person-card__image" src="../../img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
                        <div class="person-card__info-wrapper">
                            <h1 class="person-card__name">Gene Block</h1>
                            <h2 class="person-card__department">Title, Department</h2>
                            <p class="person-card__description">Card description one would be placed here.</p>
                        </div>
                    </article>
                </li>

                <li class="splide__slide">
                    <article class="person-card-grey">
                        <img class="person-card__image" src="../../img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
                        <div class="person-card__info-wrapper">
                            <h1 class="person-card__name">Gene Block</h1>
                            <h2 class="person-card__department">Title, Department</h2>
                            <p class="person-card__description">Card description two would be placed here.</p>
                        </div>
                    </article>
                </li>

                <li class="splide__slide">
                    <article class="person-card">
                        <img class="person-card__image" src="../../img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
                        <div class="person-card__info-wrapper">
                            <h1 class="person-card__name">Gene Block</h1>
                            <h2 class="person-card__department">Title, Department</h2>
                            <p class="person-card__description">Card description three would be placed here.</p>
                        </div>
                    </article>
                </li>

                <li class="splide__slide">
                    <article class="person-card-grey">
                        <img class="person-card__image" src="../../img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
                        <div class="person-card__info-wrapper">
                            <h1 class="person-card__name">Gene Block</h1>
                            <h2 class="person-card__department">Title, Department</h2>
                            <p class="person-card__description">Card description four would be placed here.</p>
                        </div>
                    </article>
                </li>

                <li class="splide__slide">
                    <article class="person-card">
                        <img class="person-card__image" src="../../img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
                        <div class="person-card__info-wrapper">
                            <h1 class="person-card__name">Gene Block</h1>
                            <h2 class="person-card__department">Title, Department</h2>
                            <p class="person-card__description">Card description five would be placed here.</p>
                        </div>
                    </article>
                </li>

                <li class="splide__slide">
                    <article class="person-card-grey">
                        <img class="person-card__image" src="../../img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
                        <div class="person-card__info-wrapper">
                            <h1 class="person-card__name">Gene Block</h1>
                            <h2 class="person-card__department">Title, Department</h2>
                            <p class="person-card__description">Card description six would be placed here.</p>
                        </div>
                    </article>
                </li>

            </ul>
        </div>
    </div>

</div>

<script>
    new Splide("#example-play-pause", {
        type: 'loop',
        perPage: 3,
        autoplay: true,
        pauseOnHover: false,
    }).mount();
</script>