Cornerstone

Social Video Slider

Social Video Slider

A horizontally scrollable set of social video cards with a content section (title, description) and prev/next navigation.

Dependencies

  • @social-video — renders each video card via “render”.
  • Vimeo Player API (https://player.vimeo.com/api/player.js)
  • social-video-slider.min.js

Behavior

  • Horizontal scroll with scroll-snap-type: x mandatory.
  • Prev/next buttons scroll one video at a time.
  • Bounce animation when hitting the start or end boundary.
  • Navigation arrows hide when all videos fit without scrolling.
  • Arrow visibility recalculates on window resize.
  • On mobile, the background image displays inside the video container. On large screens, it moves to the wrapper.
<div class="tcu-social-video-slider__wrapper">
    <div class="tcu-social-video-slider">
        <div class="tcu-social-video-slider__content">
            <h2 class="tcu-social-video-slider__content-title">Frogs Firsthand</h2>
            <p class="tcu-social-video-slider__content-description">Step into the dynamic world of TCU through the eyes of our passionate Horned Frogs.</p>
            <div class="tcu-social-video-slider__buttons">
                <button class="tcu-social-video-slider__button-previous" aria-label="Previous video">
                    <svg aria-hidden="true" focusable="false">
                        <use href="#icon-double-arrows" />
                    </svg>
                </button>
                <button class="tcu-social-video-slider__button-next" aria-label="Next video">
                    <svg aria-hidden="true" focusable="false">
                        <use href="#icon-double-arrows" />
                    </svg>
                </button>
            </div>
        </div>
        <div class="tcu-social-video-slider__video-container">
            <div class="tcu-social-video">
                <button class="tcu-social-video__poster-button" aria-label="Play video: Undergrad Research by Hannah Scheffer '25">
                    <div class="tcu-social-video__poster-overlay">
                        <div class="tcu-social-video__text">
                            <p class="tcu-social-video__text-title">Undergrad Research</p>
                            <p class="tcu-social-video__text-source">Hannah Scheffer '25</p>
                        </div>
                    </div>
                    <div class="tcu-social-video__poster">
                        <picture>
                            <img class="tcu-social-video__image" src="https://www.tcu.edu/images/home/testimonials/hannah-scheffer.webp" alt="Undergrad Research video thumbnail" loading="lazy" />
                        </picture>
                    </div>
                </button>
                <div class="tcu-social-video__embed" social-video-id="https://vimeo.com/1040131833/17e36a2d53">
                    <div class="tcu-social-video__player"></div>
                </div>
            </div>
            <div class="tcu-social-video">
                <button class="tcu-social-video__poster-button" aria-label="Play video: Campus Community by Kendra Bills '26">
                    <div class="tcu-social-video__poster-overlay">
                        <div class="tcu-social-video__text">
                            <p class="tcu-social-video__text-title">Campus Community</p>
                            <p class="tcu-social-video__text-source">Kendra Bills '26</p>
                        </div>
                    </div>
                    <div class="tcu-social-video__poster">
                        <picture>
                            <img class="tcu-social-video__image" src="https://www.tcu.edu/images/home/testimonials/kendra-bills.webp" alt="Campus Community video thumbnail" loading="lazy" />
                        </picture>
                    </div>
                </button>
                <div class="tcu-social-video__embed" social-video-id="https://vimeo.com/1040130832/fbd977903b">
                    <div class="tcu-social-video__player"></div>
                </div>
            </div>
            <div class="tcu-social-video">
                <button class="tcu-social-video__poster-button" aria-label="Play video: Internship Opportunities by Lizzy Pfeiffer '25">
                    <div class="tcu-social-video__poster-overlay">
                        <div class="tcu-social-video__text">
                            <p class="tcu-social-video__text-title">Internship Opportunities</p>
                            <p class="tcu-social-video__text-source">Lizzy Pfeiffer '25</p>
                        </div>
                    </div>
                    <div class="tcu-social-video__poster">
                        <picture>
                            <img class="tcu-social-video__image" src="https://www.tcu.edu/images/home/testimonials/lizzy-pfeiffer.webp" alt="Internship Opportunities video thumbnail" loading="lazy" />
                        </picture>
                    </div>
                </button>
                <div class="tcu-social-video__embed" social-video-id="https://vimeo.com/1040133400/172e26fb78">
                    <div class="tcu-social-video__player"></div>
                </div>
            </div>
            <div class="tcu-social-video">
                <button class="tcu-social-video__poster-button" aria-label="Play video: School Spirit by Dulce Sancen '26">
                    <div class="tcu-social-video__poster-overlay">
                        <div class="tcu-social-video__text">
                            <p class="tcu-social-video__text-title">School Spirit</p>
                            <p class="tcu-social-video__text-source">Dulce Sancen '26</p>
                        </div>
                    </div>
                    <div class="tcu-social-video__poster">
                        <picture>
                            <img class="tcu-social-video__image" src="https://www.tcu.edu/images/home/testimonials/living-on-campus.webp" alt="Getting abroad video thumbnail" loading="lazy" />
                        </picture>
                    </div>
                </button>
                <div class="tcu-social-video__embed" social-video-id="https://vimeo.com/1040131565/d049bd548a">
                    <div class="tcu-social-video__player"></div>
                </div>
            </div>
        </div>
    </div>
</div>