Carousel

<!-- Text -->
<h2>Carousel Text</h2>
<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>

<!-- Card -->
<h2 class="mt-24">Carousel Card</h2>
<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-image-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" />
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title One</span></h3>
                            <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-image-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" />
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Two</span></h3>
                            <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-image-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" />
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Three</span></h3>
                            <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-image-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" />
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Four</span></h3>
                            <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-image-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" />
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Five</span></h3>
                            <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-image-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" />
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Six</span></h3>
                            <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>

<!-- Image -->
<h2 class="mt-24">Carousel Image</h2>
<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>

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