BUX Component Development Platform

Card Collection Carousel 

<div class="bux-card-carousel">
    <div class="bux-card-carousel__nav bux-card-carousel__nav--left-column">
        <div class="bux-card-carousel__nav--left" tabindex="0" aria-label="Go to previous card">
        </div>
    </div>
    <div class="bux-card-carousel__container">

        <div class="bux-card " role="group" aria-label="Card">

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

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

                <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 href="#" class="bux-card__link">
                        <span>Learn about music opportunities</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bux-card " role="group" aria-label="Card">

            <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 href="#" class="bux-card__link">
                        <span>Discover student life</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bux-card " role="group" aria-label="Card">

            <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 href="#" class="bux-card__link">
                        <span>Volunteer for a blood drive</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bux-card " role="group" aria-label="Card">

            <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 href="#" class="bux-card__link">
                        <span>Explore engineering programs</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bux-card " role="group" aria-label="Card">

            <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 href="#" class="bux-card__link">
                        <span>Learn about lab opportunities</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="bux-card-carousel__nav  bux-card-carousel__nav--right-column">
        <div class="bux-card-carousel__nav--right" tabindex="0" aria-label="Go to next card">
        </div>
    </div>
</div>
 
<div class="bux-card-carousel">
  <div class="bux-card-carousel__nav bux-card-carousel__nav--left-column">
    <div class="bux-card-carousel__nav--left" tabindex="0" aria-label="Go to previous card">
    </div>
  </div>
  <div class="bux-card-carousel__container">
    {% for item in items %}
      {% set vars = {
        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
      } %}
        {% include '@card' with vars %}
    {% endfor %}
  </div>
  <div class="bux-card-carousel__nav  bux-card-carousel__nav--right-column">
    <div class="bux-card-carousel__nav--right" tabindex="0" aria-label="Go to next card">
    </div>
  </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
items:
  - card_image: >-
      https://bux.osu.edu/files/previews/images/template-images/story-card1_23_4499263_20230.jpg
    card_image_alt: ''
    card_heading_level: 3
    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
  • 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",
      });
    };

    // Event listeners for activating navigation buttons
    button.addEventListener("mousedown", (event) => {
      event.preventDefault();
      navigate();
    });

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

    button.addEventListener("keydown", (event) => {
      if (event.key === "Enter") {
        navigate();
      }
    });
  }

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

  // Updates tab functionality based on card visibility in carousel
  updateTabIndices() {
    const links = this.carousel.querySelectorAll(".bux-card__cta a");
    links.forEach((link) => {
      const card = link.closest(".bux-card");
      const cardLeft = card.offsetLeft - this.container.scrollLeft;
      const cardRight = cardLeft + card.offsetWidth;
      const isLinkVisible =
        cardLeft >= 0 && cardRight <= this.container.offsetWidth;
      if (isLinkVisible) {
        link.removeAttribute("tabindex");
      } else {
        link.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";
  }
}

// Initializes carousels after DOM is fully loaded
document.addEventListener("DOMContentLoaded", function () {
  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.1 KB

No notes defined.