InstantSearch specs

✏️ edit page

Widget example

HTML output

<div
  class="ais-Carousel"
>
  <button
    aria-controls="ais-Carousel-0"
    aria-label="Previous"
    class="ais-Carousel-navigation ais-Carousel-navigation--previous"
    title="Previous"
  >
    <svg
      fill="none"
      height="16"
      viewBox="0 0 8 16"
      width="8"
    >
      <path
        clipRule="evenodd"
        d="M7.13809 0.744078C7.39844 1.06951 7.39844 1.59715 7.13809 1.92259L2.27616 8L7.13809 14.0774C7.39844 14.4028 7.39844 14.9305 7.13809 15.2559C6.87774 15.5814 6.45563 15.5814 6.19528 15.2559L0.861949 8.58926C0.6016 8.26382 0.6016 7.73618 0.861949 7.41074L6.19528 0.744078C6.45563 0.418641 6.87774 0.418641 7.13809 0.744078Z"
        fill="currentColor"
        fillRule="evenodd"
      >
    </svg>
  </button>
  <ol
    aria-label="Items"
    aria-live="polite"
    aria-roledescription="carousel"
    class="ais-Carousel-list"
    id="ais-Carousel-0"
    tabindex="0"
  >
    <li
      aria-label="1 of 6"
      aria-roledescription="slide"
      class="ais-Carousel-item"
    >
      <div style="height: 100px;border: 1px solid red; display:flex; justify-content: center;align-items: center;">
        1
      </div>
    </li>
    <li
      aria-label="2 of 6"
      aria-roledescription="slide"
      class="ais-Carousel-item"
    >
      <div style="height: 100px;border: 1px solid red; display:flex; justify-content: center;align-items: center;">
        2
      </div>
    </li>
    <li
      aria-label="3 of 6"
      aria-roledescription="slide"
      class="ais-Carousel-item"
    >
      <div style="height: 100px;border: 1px solid red; display:flex; justify-content: center;align-items: center;">
        3
      </div>
    </li>
    <li
      aria-label="4 of 6"
      aria-roledescription="slide"
      class="ais-Carousel-item"
    >
      <div style="height: 100px;border: 1px solid red; display:flex; justify-content: center;align-items: center;">
        4
      </div>
    </li>
    <li
      aria-label="5 of 6"
      aria-roledescription="slide"
      class="ais-Carousel-item"
    >
      <div style="height: 100px;border: 1px solid red; display:flex; justify-content: center;align-items: center;">
        5
      </div>
    </li>
    <li
      aria-label="6 of 6"
      aria-roledescription="slide"
      class="ais-Carousel-item"
    >
      <div style="height: 100px;border: 1px solid red; display:flex; justify-content: center;align-items: center;">
        6
      </div>
    </li>
  </ol>
  <button
    aria-controls="ais-Carousel-0"
    aria-label="Next"
    class="ais-Carousel-navigation ais-Carousel-navigation--next"
    title="Next"
  >
    <svg
      fill="none"
      height="16"
      viewBox="0 0 8 16"
      width="8"
    >
      <path
        clipRule="evenodd"
        d="M0.861908 15.2559C0.601559 14.9305 0.601559 14.4028 0.861908 14.0774L5.72384 8L0.861908 1.92259C0.601559 1.59715 0.601559 1.06952 0.861908 0.744079C1.12226 0.418642 1.54437 0.418642 1.80472 0.744079L7.13805 7.41074C7.3984 7.73618 7.3984 8.26382 7.13805 8.58926L1.80472 15.2559C1.54437 15.5814 1.12226 15.5814 0.861908 15.2559Z"
        fill="currentColor"
        fillRule="evenodd"
      />
    </svg>
  </button>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-Carousel the root div of the widget
.ais-Carousel-navigation shared between navigation buttons
.ais-Carousel-navigation--previous specific to the previous button
.ais-Carousel-navigation--next specific to the next button
.ais-Carousel-list the list of items
.ais-Carousel-item each item in the list

Options

Note: there are no common options for this widget

Translations

Note: there are no translations for this widget