Carousel | UCLA Design System

A carousel refers to content that’s navigable in a horizontal orientation with an indicator that tells a user where they are in a sequence and accounts for the number of additional content elements accessible to the left or right. It is often used with a sequence of banners or cards.

When to use

A carousel component can be used in various situations where you want to showcase multiple items or content within a specific area on a page.

Anatomy

1. Carousel Indicator

The indicators are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user is currently viewing).

2. Carousel Dot

A carousel dot refers to a small indicator or navigation element used in a carousel or slideshow component on a website or mobile application. Each dot corresponds to a specific slide and provides a visual indication of the user’s current position within the carousel.

Best Practices

It’s important to use a carousel sparingly and with purpose. Avoid using it for critical information or essential navigation as it can be easily overlooked or missed by users.

Examples

<section class="swiper ucla-carousel">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <article class="ucla-card ucla-card__event">
  <a class="ucla-card__event-image-link" href="#">
    <img
      class="ucla-card__image"
      src="../../theme-assets/img/examples/event-card-example-3.jpg"
      alt="Two children on their phones under the blankets"
    />
  </a>
  <div class="ucla-card__event-body">
    <time class="ucla-card__event-date" datetime="2024-01-21"><span
        class="ucla-card__event-month"
      >Jan</span>
      <span class="ucla-card__event-day">21</span></time>
    <div class="ucla-card__event-content">
      <h4 class="ucla-card__title"><a
          class="ucla-card__title-link"
          href="#"
        >UCLA First Thursdays</a></h4>
      <div class="ucla-card__event-time">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
            fill="#666666"
          />
        </svg>
        <span><time datetime="12:00">12:00 PM</time>
          to
          <time datetime="22:00">10:00 PM</time></span>
      </div>
      <div class="ucla-card__event-location">
        <svg
          width="12"
          height="14"
          viewBox="0 0 12 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
            fill="#666666"
          />
        </svg>
        <span>Westwood Village</span>
      </div>
      <p class="ucla-card__description">Join us on Broxton Ave every first
        Thursday to connect, celebrate the moment, and enjoy tasty food and free
        entertainment!</p>
    </div>
  </div>
</article>
    </div>
    <div class="swiper-slide">
      <article class="ucla-card ucla-card__event">
  <a class="ucla-card__event-image-link" href="#">
    <img
      class="ucla-card__image"
      src="../../theme-assets/img/examples/event-card-example-3.jpg"
      alt="Two children on their phones under the blankets"
    />
  </a>
  <div class="ucla-card__event-body">
    <time class="ucla-card__event-date" datetime="2024-01-21"><span
        class="ucla-card__event-month"
      >Jan</span>
      <span class="ucla-card__event-day">21</span></time>
    <div class="ucla-card__event-content">
      <h4 class="ucla-card__title"><a
          class="ucla-card__title-link"
          href="#"
        >UCLA First Thursdays</a></h4>
      <div class="ucla-card__event-time">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
            fill="#666666"
          />
        </svg>
        <span><time datetime="12:00">12:00 PM</time>
          to
          <time datetime="22:00">10:00 PM</time></span>
      </div>
      <div class="ucla-card__event-location">
        <svg
          width="12"
          height="14"
          viewBox="0 0 12 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
            fill="#666666"
          />
        </svg>
        <span>Westwood Village</span>
      </div>
      <p class="ucla-card__description">Join us on Broxton Ave every first
        Thursday to connect, celebrate the moment, and enjoy tasty food and free
        entertainment!</p>
    </div>
  </div>
</article>
    </div>
    <div class="swiper-slide">
      <article class="ucla-card ucla-card__event">
  <a class="ucla-card__event-image-link" href="#">
    <img
      class="ucla-card__image"
      src="../../theme-assets/img/examples/event-card-example-3.jpg"
      alt="Two children on their phones under the blankets"
    />
  </a>
  <div class="ucla-card__event-body">
    <time class="ucla-card__event-date" datetime="2024-01-21"><span
        class="ucla-card__event-month"
      >Jan</span>
      <span class="ucla-card__event-day">21</span></time>
    <div class="ucla-card__event-content">
      <h4 class="ucla-card__title"><a
          class="ucla-card__title-link"
          href="#"
        >UCLA First Thursdays</a></h4>
      <div class="ucla-card__event-time">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
            fill="#666666"
          />
        </svg>
        <span><time datetime="12:00">12:00 PM</time>
          to
          <time datetime="22:00">10:00 PM</time></span>
      </div>
      <div class="ucla-card__event-location">
        <svg
          width="12"
          height="14"
          viewBox="0 0 12 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
            fill="#666666"
          />
        </svg>
        <span>Westwood Village</span>
      </div>
      <p class="ucla-card__description">Join us on Broxton Ave every first
        Thursday to connect, celebrate the moment, and enjoy tasty food and free
        entertainment!</p>
    </div>
  </div>
</article>
    </div>
    <div class="swiper-slide">
      <article class="ucla-card ucla-card__event">
  <a class="ucla-card__event-image-link" href="#">
    <img
      class="ucla-card__image"
      src="../../theme-assets/img/examples/event-card-example-3.jpg"
      alt="Two children on their phones under the blankets"
    />
  </a>
  <div class="ucla-card__event-body">
    <time class="ucla-card__event-date" datetime="2024-01-21"><span
        class="ucla-card__event-month"
      >Jan</span>
      <span class="ucla-card__event-day">21</span></time>
    <div class="ucla-card__event-content">
      <h4 class="ucla-card__title"><a
          class="ucla-card__title-link"
          href="#"
        >UCLA First Thursdays</a></h4>
      <div class="ucla-card__event-time">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
            fill="#666666"
          />
        </svg>
        <span><time datetime="12:00">12:00 PM</time>
          to
          <time datetime="22:00">10:00 PM</time></span>
      </div>
      <div class="ucla-card__event-location">
        <svg
          width="12"
          height="14"
          viewBox="0 0 12 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
            fill="#666666"
          />
        </svg>
        <span>Westwood Village</span>
      </div>
      <p class="ucla-card__description">Join us on Broxton Ave every first
        Thursday to connect, celebrate the moment, and enjoy tasty food and free
        entertainment!</p>
    </div>
  </div>
</article>
    </div>
    <div class="swiper-slide">
      <article class="ucla-card ucla-card__event">
  <a class="ucla-card__event-image-link" href="#">
    <img
      class="ucla-card__image"
      src="../../theme-assets/img/examples/event-card-example-3.jpg"
      alt="Two children on their phones under the blankets"
    />
  </a>
  <div class="ucla-card__event-body">
    <time class="ucla-card__event-date" datetime="2024-01-21"><span
        class="ucla-card__event-month"
      >Jan</span>
      <span class="ucla-card__event-day">21</span></time>
    <div class="ucla-card__event-content">
      <h4 class="ucla-card__title"><a
          class="ucla-card__title-link"
          href="#"
        >UCLA First Thursdays</a></h4>
      <div class="ucla-card__event-time">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
            fill="#666666"
          />
        </svg>
        <span><time datetime="12:00">12:00 PM</time>
          to
          <time datetime="22:00">10:00 PM</time></span>
      </div>
      <div class="ucla-card__event-location">
        <svg
          width="12"
          height="14"
          viewBox="0 0 12 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
            fill="#666666"
          />
        </svg>
        <span>Westwood Village</span>
      </div>
      <p class="ucla-card__description">Join us on Broxton Ave every first
        Thursday to connect, celebrate the moment, and enjoy tasty food and free
        entertainment!</p>
    </div>
  </div>
</article>
    </div>
    <div class="swiper-slide">
      <article class="ucla-card ucla-card__event">
  <a class="ucla-card__event-image-link" href="#">
    <img
      class="ucla-card__image"
      src="../../theme-assets/img/examples/event-card-example-3.jpg"
      alt="Two children on their phones under the blankets"
    />
  </a>
  <div class="ucla-card__event-body">
    <time class="ucla-card__event-date" datetime="2024-01-21"><span
        class="ucla-card__event-month"
      >Jan</span>
      <span class="ucla-card__event-day">21</span></time>
    <div class="ucla-card__event-content">
      <h4 class="ucla-card__title"><a
          class="ucla-card__title-link"
          href="#"
        >UCLA First Thursdays</a></h4>
      <div class="ucla-card__event-time">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
            fill="#666666"
          />
        </svg>
        <span><time datetime="12:00">12:00 PM</time>
          to
          <time datetime="22:00">10:00 PM</time></span>
      </div>
      <div class="ucla-card__event-location">
        <svg
          width="12"
          height="14"
          viewBox="0 0 12 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
            fill="#666666"
          />
        </svg>
        <span>Westwood Village</span>
      </div>
      <p class="ucla-card__description">Join us on Broxton Ave every first
        Thursday to connect, celebrate the moment, and enjoy tasty food and free
        entertainment!</p>
    </div>
  </div>
</article>
    </div>
    <div class="swiper-slide">
      <article class="ucla-card ucla-card__event">
  <a class="ucla-card__event-image-link" href="#">
    <img
      class="ucla-card__image"
      src="../../theme-assets/img/examples/event-card-example-3.jpg"
      alt="Two children on their phones under the blankets"
    />
  </a>
  <div class="ucla-card__event-body">
    <time class="ucla-card__event-date" datetime="2024-01-21"><span
        class="ucla-card__event-month"
      >Jan</span>
      <span class="ucla-card__event-day">21</span></time>
    <div class="ucla-card__event-content">
      <h4 class="ucla-card__title"><a
          class="ucla-card__title-link"
          href="#"
        >UCLA First Thursdays</a></h4>
      <div class="ucla-card__event-time">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
            fill="#666666"
          />
        </svg>
        <span><time datetime="12:00">12:00 PM</time>
          to
          <time datetime="22:00">10:00 PM</time></span>
      </div>
      <div class="ucla-card__event-location">
        <svg
          width="12"
          height="14"
          viewBox="0 0 12 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
            fill="#666666"
          />
        </svg>
        <span>Westwood Village</span>
      </div>
      <p class="ucla-card__description">Join us on Broxton Ave every first
        Thursday to connect, celebrate the moment, and enjoy tasty food and free
        entertainment!</p>
    </div>
  </div>
</article>
    </div>
    <div class="swiper-slide">
      <article class="ucla-card ucla-card__event">
  <a class="ucla-card__event-image-link" href="#">
    <img
      class="ucla-card__image"
      src="../../theme-assets/img/examples/event-card-example-3.jpg"
      alt="Two children on their phones under the blankets"
    />
  </a>
  <div class="ucla-card__event-body">
    <time class="ucla-card__event-date" datetime="2024-01-21"><span
        class="ucla-card__event-month"
      >Jan</span>
      <span class="ucla-card__event-day">21</span></time>
    <div class="ucla-card__event-content">
      <h4 class="ucla-card__title"><a
          class="ucla-card__title-link"
          href="#"
        >UCLA First Thursdays</a></h4>
      <div class="ucla-card__event-time">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
            fill="#666666"
          />
        </svg>
        <span><time datetime="12:00">12:00 PM</time>
          to
          <time datetime="22:00">10:00 PM</time></span>
      </div>
      <div class="ucla-card__event-location">
        <svg
          width="12"
          height="14"
          viewBox="0 0 12 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
            fill="#666666"
          />
        </svg>
        <span>Westwood Village</span>
      </div>
      <p class="ucla-card__description">Join us on Broxton Ave every first
        Thursday to connect, celebrate the moment, and enjoy tasty food and free
        entertainment!</p>
    </div>
  </div>
</article>
    </div>
    <div class="swiper-slide">
      <article class="ucla-card ucla-card__event">
  <a class="ucla-card__event-image-link" href="#">
    <img
      class="ucla-card__image"
      src="../../theme-assets/img/examples/event-card-example-3.jpg"
      alt="Two children on their phones under the blankets"
    />
  </a>
  <div class="ucla-card__event-body">
    <time class="ucla-card__event-date" datetime="2024-01-21"><span
        class="ucla-card__event-month"
      >Jan</span>
      <span class="ucla-card__event-day">21</span></time>
    <div class="ucla-card__event-content">
      <h4 class="ucla-card__title"><a
          class="ucla-card__title-link"
          href="#"
        >UCLA First Thursdays</a></h4>
      <div class="ucla-card__event-time">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
            fill="#666666"
          />
        </svg>
        <span><time datetime="12:00">12:00 PM</time>
          to
          <time datetime="22:00">10:00 PM</time></span>
      </div>
      <div class="ucla-card__event-location">
        <svg
          width="12"
          height="14"
          viewBox="0 0 12 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
            fill="#666666"
          />
        </svg>
        <span>Westwood Village</span>
      </div>
      <p class="ucla-card__description">Join us on Broxton Ave every first
        Thursday to connect, celebrate the moment, and enjoy tasty food and free
        entertainment!</p>
    </div>
  </div>
</article>
    </div>
  </div>
  <div class="swiper-pagination ucla-carousel__pagination"></div>
</section>

Before utilizing a carousel, please read the messages from this site.

Note: The carousel is extending a third-party library Swiper. If you like to extend the carousel, please refer to Swiper Documentation

In order to build a carousel, start with the following HTML:

<section class="swiper ucla-carousel" aria-label="My Carousel">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 01</div>
    <div class="swiper-slide">Slide 02</div>
    <div class="swiper-slide">Slide 03</div>
  </div>
  <div class="swiper-pagination ucla-carousel__pagination"></div>
</section>

Two children on their phones under the blankets

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Number of Slides Per Page

By default, we have set the following number of slides per page:

Desktop: 3 Slides per page Tablet: 2 Slides per page Mobile: 1 Slide per page

If you would like to override these, add the following attribute to the .ucla-carousel element:

<section
  class="swiper ucla-carousel"
  data-ucla-per-page="1"
  data-ucla-per-page-md="2"
  data-ucla-per-page-lg="3"
>

data-ucla-per-page - Mobile slide per page
data-ucla-per-page-md - Tablet slide per page
data-ucla-per-page-lg - Desktop slide per page

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

Jan 21

UCLA First Thursdays

12:00 PM to 10:00 PM

Westwood Village

Join us on Broxton Ave every first Thursday to connect, celebrate the moment, and enjoy tasty food and free entertainment!

<section
  class="ucla-carousel swiper"
  data-ucla-per-page="2"
  data-ucla-per-page-md="1"
  data-ucla-per-page-lg="4"
>