Card Collection Carousel

Ready

HTML
Twig
Context
Assets
Info
Notes


        
        <div class="bux-card-carousel" role="group" aria-label="Stories" aria-roledescription="carousel">
    <div class="bux-card-carousel__nav bux-card-carousel__nav--left-column">
        <button class="bux-card-carousel__nav--left" type="button" tabindex="0" aria-label="Go to previous card">
        </button>
    </div>
    <div class="bux-card-carousel__container">

        <div class="bux-card" role="group" aria-roledescription="Card" aria-label="Explore your musical passion">

            <img class="bux-image " src="https://bux.osu.edu/files/previews/images/template-images/story-card1_23_4499263_20230.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading"><span>Explore your musical passion</span>
                    <span class="bux-card__heading-icon" aria-hidden="true"></span>
                </h2>

                <div class="bux-card__body">
                    Join ensembles and discover opportunities to perform, collaborate, and grow as a musician at Ohio State Mansfield.
                </div>

                <div class="bux-card__cta">

                    <a class="bux-card__link" href="#" rel="noopener">
                        <span class="bux-card__link__text">Learn about music opportunities</span>
                    </a>
                </div>

            </div>
        </div>

        <div class="bux-card" role="group" aria-roledescription="Card" aria-label="Build leadership through teamwork">

            <img class="bux-image " src="https://bux.osu.edu/files/previews/images/template-images/story-card5_22_3861899-3571.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading"><span>Build leadership through teamwork</span>
                    <span class="bux-card__heading-icon" aria-hidden="true"></span>
                </h2>

                <div class="bux-card__body">
                    Engage in team-building activities that strengthen communication, problem-solving, and leadership skills for your future career.
                </div>

                <div class="bux-card__cta">

                    <a class="bux-card__link" href="#" rel="noopener">
                        <span class="bux-card__link__text">Discover student life</span>
                    </a>
                </div>

            </div>
        </div>

        <div class="bux-card" role="group" aria-roledescription="Card" aria-label="Make a difference today">

            <img class="bux-image " src="https://bux.osu.edu/files/previews/images/template-images/story-card3_22_4156707_6683.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading"><span>Make a difference today</span>
                    <span class="bux-card__heading-icon" aria-hidden="true"></span>
                </h2>

                <div class="bux-card__body">
                    Participate in campus blood drives and help save lives while connecting with a caring, service-driven community.
                </div>

                <div class="bux-card__cta">

                    <a class="bux-card__link" href="#" rel="noopener">
                        <span class="bux-card__link__text">Volunteer for a blood drive</span>
                    </a>
                </div>

            </div>
        </div>

        <div class="bux-card" role="group" aria-roledescription="Card" aria-label="Hands-on engineering experience">

            <img class="bux-image " src="https://bux.osu.edu/files/previews/images/template-images/story-card2_23_4491381_20698.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading"><span>Hands-on engineering experience</span>
                    <span class="bux-card__heading-icon" aria-hidden="true"></span>
                </h2>

                <div class="bux-card__body">
                    Gain practical skills in engineering technology labs, just like Zachary Ernest, and prepare for real-world innovation.
                </div>

                <div class="bux-card__cta">

                    <a class="bux-card__link" href="#" rel="noopener">
                        <span class="bux-card__link__text">Explore engineering programs</span>
                    </a>
                </div>

            </div>
        </div>

        <div class="bux-card" role="group" aria-roledescription="Card" aria-label="Dive into scientific discovery">

            <img class="bux-image " src="https://bux.osu.edu/files/previews/images/template-images/story-card4_23_4317692_2015.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading"><span>Dive into scientific discovery</span>
                    <span class="bux-card__heading-icon" aria-hidden="true"></span>
                </h2>

                <div class="bux-card__body">
                    Work in state-of-the-art labs, conducting experiments that build your knowledge and open doors to exciting careers.
                </div>

                <div class="bux-card__cta">

                    <a class="bux-card__link" href="#" rel="noopener">
                        <span class="bux-card__link__text">Learn about lab opportunities</span>
                    </a>
                </div>

            </div>
        </div>
    </div>
    <div class="bux-card-carousel__nav  bux-card-carousel__nav--right-column">
        <button class="bux-card-carousel__nav--right" tabindex="0" aria-label="Go to next card">
        </button>
    </div>
</div>


        <div class="bux-card-carousel" role="group" aria-label="{{name}}" aria-roledescription="carousel">
  <div class="bux-card-carousel__nav bux-card-carousel__nav--left-column">
    <button class="bux-card-carousel__nav--left" type="button" tabindex="0" aria-label="Go to previous card">
    </button>
  </div>
  <div class="bux-card-carousel__container">
    {% for item in items %}
        {% include '@card' with {
            card_image: true,
            image_url: item.card_image,
            card_image_alt: item.card_image_alt,
            card_heading_level: item.card_heading_level,
            card_heading: item.card_heading,
            card_body: item.card_body,
            card_url: item.card_url,
            card_cta: item.card_cta
        } %}
    {% endfor %}
  </div>
  <div class="bux-card-carousel__nav  bux-card-carousel__nav--right-column">
    <button class="bux-card-carousel__nav--right" tabindex="0" aria-label="Go to next card">
    </button>
  </div>
</div>


        
            
            site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
name: Stories
items:
  - card_image: >-
      https://bux.osu.edu/files/previews/images/template-images/story-card1_23_4499263_20230.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: Explore your musical passion
    card_body: >-
      Join ensembles and discover opportunities to perform, collaborate, and
      grow as a musician at Ohio State Mansfield.
    card_url: '#'
    card_cta: Learn about music opportunities
  - card_image: >-
      https://bux.osu.edu/files/previews/images/template-images/story-card5_22_3861899-3571.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: Build leadership through teamwork
    card_body: >-
      Engage in team-building activities that strengthen communication,
      problem-solving, and leadership skills for your future career.
    card_url: '#'
    card_cta: Discover student life
  - card_image: >-
      https://bux.osu.edu/files/previews/images/template-images/story-card3_22_4156707_6683.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: Make a difference today
    card_body: >-
      Participate in campus blood drives and help save lives while connecting
      with a caring, service-driven community.
    card_url: '#'
    card_cta: Volunteer for a blood drive
  - card_image: >-
      https://bux.osu.edu/files/previews/images/template-images/story-card2_23_4491381_20698.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: Hands-on engineering experience
    card_body: >-
      Gain practical skills in engineering technology labs, just like Zachary
      Ernest, and prepare for real-world innovation.
    card_url: '#'
    card_cta: Explore engineering programs
  - card_image: >-
      https://bux.osu.edu/files/previews/images/template-images/story-card4_23_4317692_2015.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: Dive into scientific discovery
    card_body: >-
      Work in state-of-the-art labs, conducting experiments that build your
      knowledge and open doors to exciting careers.
    card_url: '#'
    card_cta: Learn about lab opportunities

File:

Content:


                                // Variables
$sp-nav: 44px;

// BUX Card Carousel
.bux-card-carousel {
  position: relative;
  overflow: hidden;
  margin: $sp-32 0;

  &__container {
    display: flex;
    overflow-x: scroll;
    scroll-padding: 0 $sp-64;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;

    // BUX Card
    .bux-card {
      scroll-snap-align: start;
      flex: 0 0 calc(100% - 128px);
      margin-right: $sp-32;

      &:first-child {
        margin-left: $sp-64;
      }

      &:last-child {
        margin-right: $sp-64;
      }

      @media (min-width: $bp-md) {
        flex: 0 0 calc(33.333% - 64px);
      }

      @media (min-width: $bp-lg) {
        flex: 0 0 calc(25% - 56px);
      }
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__nav {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    height: 100%;
    width: $sp-nav;
    font-family: bux-icons;
    display: flex;
    align-items: center;
    cursor: pointer;

    &--left-column {
      left: 0;
    }

    &--right-column {
      right: 0;
    }

    &--left,
    &--right {
      height: $sp-nav;
      width: $sp-nav;
      background: $white;
      color: $scarlet;
      border: solid 2px $scarlet;

      &:hover {
        background: $gray-dark-60;
        color: $white;
        border-color: $gray-dark-60;
      }

      &:focus {
        outline: 2px solid $focus;
        outline-offset: 2px;
      }
    }

    &--left {
      &::before {
        content: "\f004";
        margin: auto;
      }
    }

    &--right {
      &::before {
        content: "\f005";
        margin: auto;
      }
    }
  }
}

URL: /components/raw/card-collection-carousel/_card-collection-carousel.scss
Filesystem Path: src/components/card-collection-carousel/_card-collection-carousel.scss
Size: 1.7 KB

Content:


                                {
  class Carousel {
    constructor(carousel) {
      this.carousel = carousel;
      this.leftButton = carousel.querySelector(".bux-card-carousel__nav--left");
      this.rightButton = carousel.querySelector(".bux-card-carousel__nav--right");
      this.container = carousel.querySelector(".bux-card-carousel__container");
      this.card = this.container.querySelector(".bux-card");

      // Updates navigation buttons when a carousel is created
      this.updateNavigation();

      // Event listeners to update navigation on scroll and window resize
      this.container.addEventListener("scroll", () => {
        this.updateNavigation();
      });
      window.addEventListener("resize", () => {
        this.updateNavigation();
      });

      // Set up navigation button listeners for left and right buttons
      this.setupNavButtonListeners({ button: this.leftButton, direction: -1 });
      this.setupNavButtonListeners({ button: this.rightButton, direction: 1 });
    }

    setupNavButtonListeners({ button, direction }) {
      // Scrolls carousel the carousel 1 card based on button clicked
      const navigate = () => {
        const cardWidthIncludingMargins =
          this.card.offsetWidth +
          parseFloat(window.getComputedStyle(this.card).marginRight);
        this.container.scrollBy({
          top: 0,
          left: direction * cardWidthIncludingMargins,
          behavior: "smooth",
        });
      };

      button.addEventListener("click", (event) => {
        event.preventDefault();
        event.stopPropagation();
        navigate();
      });

      button.parentElement.addEventListener("click", () => {
        navigate();
      });

    }

    // Updates tab indices and button visibility
    updateNavigation() {
      this.updateCardAccessibility();
      this.updateButtonVisibility();
    }

    // Updates tab functionality based on card visibility in carousel
    updateCardAccessibility() {
      const cards = this.container.querySelectorAll(".bux-card");
      const containerWidth = this.container.offsetWidth;
      const containerScroll = this.container.scrollLeft;

      cards.forEach((card) => {
        const cardLeft = card.offsetLeft - containerScroll;
        const cardRight = cardLeft + card.offsetWidth;
        const isCardVisible = (cardLeft >= 0) && (cardRight <= containerWidth);

        if (isCardVisible) {
          card.removeAttribute("aria-hidden");
        } else {
          card.setAttribute("aria-hidden", "true");
        }
        const interactiveElements = card.querySelectorAll("a, button");

        interactiveElements.forEach((el) => {
          if (isCardVisible) {
            el.removeAttribute("tabindex");
          } else {
            el.setAttribute("tabindex", "-1");
          }
        });
      });
    }

    // Updates navigation button visibility based on scroll distance
    updateButtonVisibility() {
      this.leftButton.style.display =
        this.container.scrollLeft > 0 ? "flex" : "none";
      this.rightButton.style.display =
        this.container.scrollWidth -
          this.container.scrollLeft -
          this.container.clientWidth >
        1
          ? "flex"
          : "none";
    }
  }

  const carousels = document.querySelectorAll(".bux-card-carousel");
  carousels.forEach((carouselElement) => new Carousel(carouselElement));
}

URL: /components/raw/card-collection-carousel/card-collection-carousel.js
Filesystem Path: src/components/card-collection-carousel/card-collection-carousel.js
Size: 3.4 KB

Handle: @card-collection-carousel
Preview:
- With layout
- Component only
Filesystem Path: src/components/card-collection-carousel/card-collection-carousel.twig
References (1): @card
Referenced by (1): @visual-demo

No notes defined.