Carousel: Default

<div id="example-text" class="splide">
    <div class="splide__slider">
        <!-- relative -->
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">
                    <h3>Title One Example</h3>
                    <p>Carousels dont have to be images, they can be words. There is no limit to how many words you an use. It is reccommended that you try to match the amount of content in each slide.</p>
                </li>
                <li class="splide__slide">
                    <div class="ribbon">Ribbon Title Two Example</div>
                    <p>Carousels dont have to be images, they can be words. There is no limit to how many words you an use. It is reccommended that you try to match the amount of content in each slide.</p>
                </li>
                <li class="splide__slide">
                    <h2 class="ribbon">Ribbon Title Three Example</h2>
                    <p>Carousels dont have to be images, they can be words. There is no limit to how many words you an use. It is reccommended that you try to match the amount of content in each slide.</p>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    new Splide("#example-text").mount();
</script>

<div id="example-image" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="/img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 1
            </li>
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="/img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 2
            </li>
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="/img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 3
            </li>

            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="/img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 4
            </li>
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="/img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 5
            </li>
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="/img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 6
            </li>
        </ul>
    </div>
</div>

<script>
    new Splide("#example-image").mount();
</script>

<div id="example-card" class="splide">
    <div class="splide__slider">
        <!-- relative -->
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-white">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title One</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide one.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-lightest-grey-2">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Two</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide two.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-white">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Three</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide three.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>

                <li class="splide__slide">

                    <article class="story__secondary-card has-background-lightest-grey-2">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Four</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide four.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-white">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Five</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide five.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-lightest-grey-2">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Six</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide six.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

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

<script>
    new Splide("#example-card", {
        perPage: 3,
        rewind: true,
        breakpoints: {
            768: {
                perPage: 2,
            },
            600: {
                perPage: 1,
            },
        }
    }).mount();
</script>

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