An Image Slider (or Carousel) allows users to navigate through multiple images or content blocks. It's commonly used for testimonials, featured content, or product showcases.

Default Slider

<div class="slider">
  <div class="slider__list">
    <div class="slider__track">
      <div class="slider__slide slider__slide-active">
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
      </div>
      <div class="slider__slide ">
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
      </div>
    </div>
  </div>
  <div class="slider__action">
    <button class="slider__arrow slider__prev blueprint-icon icon-chevron_left" aria-label="previous" disabled></button>
    <div class="slider__dots">
      <button class="slider__active"></button>
      <button></button>
    </div>
    <button class="slider__arrow slider__next blueprint-icon icon-chevron_right" aria-label="next"></button>
  </div>
</div>

Active Slider

<div class="slider">
  <div class="slider__list">
    <div class="slider__track">
      <div class="slider__slide slider__slide-active">
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
      </div>
      <div class="slider__slide ">
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
        <div class="slider__slide-wrapper">
          <img src="./assets/component-images/240*80px.svg" class="full-width">
        </div>
      </div>
    </div>
  </div>
  <div class="slider__action">
    <button class="slider__arrow slider__prev blueprint-icon icon-chevron_left" aria-label="previous"></button>
    <div class="slider__dots">
      <button></button>
      <button class="slider__active"></button>
      <button></button>
      <button></button>
    </div>
    <button class="slider__arrow slider__next blueprint-icon icon-chevron_right" aria-label="next"></button>
  </div>
</div>