Card Collection Carousel

Draft

HTML
Twig
Context
Assets
Info
Notes


        
        <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 ">
            <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="" />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>This is about an animal and maybe this heading is two lines long</span>
                </h3>

                <div class="bux-card__body">
                    Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical small batch mumblecore drinking vinegar.
                </div>
                <div class="bux-card__cta">
                    <a href="http://example.com">
                        <span>Card CTA</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bux-card ">
            <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading">
                    <span>This is a test header and different from the other one</span>
                </h2>

                <div class="bux-card__body">
                    Words go here. Awesome words that will amaze the reader. Words go here. Awesome words that will amaze the reader.Words go here. Awesome words that will amaze the reader.
                </div>
                <div class="bux-card__cta">
                    <a href="http://example.com">
                        <span>Card CTA</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bux-card ">
            <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading">
                    <span>This is a test header and different from the other one</span>
                </h2>

                <div class="bux-card__body">
                    Words go here. Awesome words that will amaze the reader.
                </div>
                <div class="bux-card__cta">
                    <a href="http://example.com">
                        <span>Card CTA</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bux-card ">
            <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading">
                    <span>This is a test header and different from the other one</span>
                </h2>

                <div class="bux-card__body">
                    Words go here. Awesome words that will amaze the reader.
                </div>
                <div class="bux-card__cta">
                    <a href="http://example.com">
                        <span>Card CTA</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bux-card ">
            <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading">
                    <span>This is a test header and different from the other one</span>
                </h2>

                <div class="bux-card__body">
                    Words go here. Awesome words that will amaze the reader.
                </div>
                <div class="bux-card__cta">
                    <a href="http://example.com">
                        <span>Card CTA</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bux-card ">
            <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="" />

            <div class="bux-card__content">

                <h2 class="bux-card__heading">
                    <span>This is a test header and different from the other one</span>
                </h2>

                <div class="bux-card__body">
                    Words go here. Awesome words that will amaze the reader.
                </div>
                <div class="bux-card__cta">
                    <a href="http://example.com">
                        <span>Card CTA</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://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg
    card_image_alt: ''
    card_heading_level: 3
    card_heading: This is about an animal and maybe this heading is two lines long
    card_body: >-
      Cloud bread mixtape cornhole, forage godard organic retro knausgaard.
      Ethical small batch mumblecore drinking vinegar.
    card_url: http://example.com
    card_cta: Card CTA
  - card_image: https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: This is a test header and different from the other one
    card_body: >-
      Words go here. Awesome words that will amaze the reader. Words go here.
      Awesome words that will amaze the reader.Words go here. Awesome words that
      will amaze the reader.
    card_url: http://example.com
    card_cta: Card CTA
  - card_image: https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: This is a test header and different from the other one
    card_body: Words go here. Awesome words that will amaze the reader.
    card_url: http://example.com
    card_cta: Card CTA
  - card_image: https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: This is a test header and different from the other one
    card_body: Words go here. Awesome words that will amaze the reader.
    card_url: http://example.com
    card_cta: Card CTA
  - card_image: https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: This is a test header and different from the other one
    card_body: Words go here. Awesome words that will amaze the reader.
    card_url: http://example.com
    card_cta: Card CTA
  - card_image: https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg
    card_image_alt: ''
    card_heading_level: 2
    card_heading: This is a test header and different from the other one
    card_body: Words go here. Awesome words that will amaze the reader.
    card_url: http://example.com
    card_cta: Card CTA

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",
      });
    };

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

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.