Around UI Kit | Carousel (Slider)

Navigation (Prev / next buttons)

Preview
HTML

<!-- Extra large prev/next buttons -->
<button type="button" class="btn btn-prev btn-icon btn-xl btn-outline-primary rounded-circle me-2" aria-label="Prev">
  <i class="ai-arrow-left"></i>
</button>
<button type="button" class="btn btn-next btn-icon btn-xl btn-outline-primary rounded-circle ms-2" aria-label="Next">
  <i class="ai-arrow-right"></i>
</button>

<!-- Large prev/next buttons -->
<button type="button" class="btn btn-prev btn-icon btn-lg btn-outline-primary rounded-circle me-2" aria-label="Prev">
  <i class="ai-arrow-left"></i>
</button>
<button type="button" class="btn btn-next btn-icon btn-lg btn-outline-primary rounded-circle ms-2" aria-label="Next">
  <i class="ai-arrow-right"></i>
</button>

<!-- Normal prev/next buttons -->
<button type="button" class="btn btn-prev btn-icon btn-outline-primary rounded-circle me-2" aria-label="Prev">
  <i class="ai-arrow-left"></i>
</button>
<button type="button" class="btn btn-next btn-icon btn-outline-primary rounded-circle ms-2" aria-label="Next">
  <i class="ai-arrow-right"></i>
</button>

<!-- Small prev/next buttons -->
<button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle me-2" aria-label="Prev">
  <i class="ai-arrow-left"></i>
</button>
<button type="button" class="btn btn-next btn-icon btn-sm btn-outline-primary rounded-circle ms-2" aria-label="Next">
  <i class="ai-arrow-right"></i>
</button>

Pagination

Preview
HTML

1

2

3

1

2

3

1

2

3

1

2

3

<!-- Pagination: Bullets -->
<div class="swiper swiper-nav-onhover" data-swiper-options='{
  "spaceBetween": 20,
  "loop": true,
  "pagination": {
    "el": ".swiper-pagination",
    "clickable": true
  },
  "navigation": {
    "prevEl": ".btn-prev",
    "nextEl": ".btn-next"
  }
}'>
  <div class="swiper-wrapper">

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-secondary">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-secondary">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-secondary">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
      </div>
    </div>
  </div>

  <!-- Prev button -->
  <button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle" aria-label="Prev">
    <i class="ai-arrow-left"></i>
  </button>

  <!-- Next button -->
  <button type="button" class="btn btn-next btn-icon btn-sm btn-outline-primary rounded-circle" aria-label="Next">
    <i class="ai-arrow-right"></i>
  </button>

  <!-- Bullets -->
  <div class="swiper-pagination"></div>
</div>


<!-- Pagination: Progress bar -->
<div class="swiper swiper-nav-onhover" data-swiper-options='{
  "spaceBetween": 20,
  "pagination": {
    "el": ".swiper-pagination",
    "type":  "progressbar"
  },
  "navigation": {
    "prevEl": ".btn-prev",
    "nextEl": ".btn-next"
  }
}'>
  <div class="swiper-wrapper">

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-secondary">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-secondary">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-secondary">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
      </div>
    </div>
  </div>

  <!-- Prev button -->
  <button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle" aria-label="Prev">
    <i class="ai-arrow-left"></i>
  </button>

  <!-- Next button -->
  <button type="button" class="btn btn-next btn-icon btn-sm btn-outline-primary rounded-circle" aria-label="Next">
    <i class="ai-arrow-right"></i>
  </button>

  <!-- Progress bar -->
  <div class="swiper-pagination"></div>
</div>


<!-- Pagination: Fraction -->
<div class="swiper swiper-nav-onhover" data-swiper-options='{
  "spaceBetween": 20,
  "pagination": {
    "el": ".swiper-pagination",
    "type": "fraction"
  },
  "navigation": {
    "prevEl": ".btn-prev",
    "nextEl": ".btn-next"
  }
}'>
  <div class="swiper-wrapper">

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-secondary">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-secondary">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-secondary">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
      </div>
    </div>
  </div>

  <!-- Prev button -->
  <button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle" aria-label="Prev">
    <i class="ai-arrow-left"></i>
  </button>

  <!-- Next button -->
  <button type="button" class="btn btn-next btn-icon btn-sm btn-outline-primary rounded-circle" aria-label="Next">
    <i class="ai-arrow-rigsht"></i>
  </button>

  <!-- Fraction -->
  <div class="swiper-pagination text-body-secondary fs-5 lh-1 opacity-50 fw-semibold"></div>
</div>


<!-- Pagination: Scrollbar -->
<div class="ratio ratio-16x9">
  <div class="swiper" data-swiper-options='{
    "direction": "vertical",
    "mousewheel": true,
    "spaceBetween": 20,
    "scrollbar": {
      "el": ".swiper-scrollbar"
    }
  }'>
    <div class="swiper-wrapper">

      <!-- Item -->
      <div class="swiper-slide">
        <div class="ratio ratio-16x9 bg-secondary">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
        </div>
      </div>

      <!-- Item -->
      <div class="swiper-slide">
        <div class="ratio ratio-16x9 bg-secondary">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
        </div>
      </div>

      <!-- Item -->
      <div class="swiper-slide">
        <div class="ratio ratio-16x9 bg-secondary">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
        </div>
      </div>
    </div>

    <!-- Scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>
</div>

Multiple slides (Responsive) + Controls and pagination outside

Preview
HTML

1

2

3

4

<!-- Multiple slides responsive slider with external Prev / Next buttons and bullets outside -->
<div class="position-relative px-5">

  <!-- External slider prev/next buttons -->
  <button type="button" id="prev" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle position-absolute top-50 start-0 translate-middle-y mt-n3" aria-label="Prev">
    <i class="ai-arrow-left"></i>
  </button>
  <button type="button" id="next" class="btn btn-next btn-icon btn-sm btn-outline-primary rounded-circle position-absolute top-50 end-0 translate-middle-y mt-n3" aria-label="Next">
    <i class="ai-arrow-right"></i>
  </button>

  <!-- Slider -->
  <div class="swiper" data-swiper-options='{
    "slidesPerView": 1,
    "spaceBetween": 16,
    "loop": true,
    "pagination": {
      "el": ".swiper-pagination",
      "clickable": true
    },
    "navigation": {
      "prevEl": "#prev",
      "nextEl": "#next"
    },
    "breakpoints": {
      "600": {
        "slidesPerView": 2
      },
      "1000": {
        "slidesPerView": 3
      }
    }
  }'>
    <div class="swiper-wrapper">

      <!-- Item -->
      <div class="swiper-slide">
        <div class="ratio ratio-4x3 bg-info bg-opacity-10">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
        </div>
      </div>

      <!-- Item -->
      <div class="swiper-slide">
        <div class="ratio ratio-4x3 bg-success bg-opacity-10">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
        </div>
      </div>

      <!-- Item -->
      <div class="swiper-slide">
        <div class="ratio ratio-4x3 bg-danger bg-opacity-10">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
        </div>
      </div>

      <!-- Item -->
      <div class="swiper-slide">
        <div class="ratio ratio-4x3 bg-warning bg-opacity-10">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
        </div>
      </div>
    </div>

    <!-- Pagination (Bullets) -->
    <div class="swiper-pagination position-relative bottom-0 mt-4"></div>
  </div>
</div>

Fade transition

Preview
HTML

First

Second

Third

<!-- Slider with fade transition between slides -->
<div class="swiper" data-swiper-options='{
  "effect": "fade",
  "loop": true,
  "navigation": {
    "prevEl": ".btn-prev",
    "nextEl": ".btn-next"
  }
}'>
  <div class="swiper-wrapper">

    <!-- Item -->
    <div class="swiper-slide bg-light">
      <div class="ratio ratio-16x9 bg-info bg-opacity-10">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">First</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide bg-light">
      <div class="ratio ratio-16x9 bg-danger bg-opacity-10">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Second</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide bg-light">
      <div class="ratio ratio-16x9 bg-warning bg-opacity-10">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Third</div>
      </div>
    </div>
  </div>

  <!-- Prev button -->
  <button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle" aria-label="Prev">
    <i class="ai-arrow-left"></i>
  </button>

  <!-- Next button -->
  <button type="button" class="btn btn-next btn-icon btn-sm btn-outline-primary rounded-circle" aria-label="Next">
    <i class="ai-arrow-rigsht"></i>
  </button>
</div>

Thumbnails

Preview
HTML

First

Second

Third

<!-- Swiper slider with thumbnails example -->
<div class="swiper" data-swiper-options='{
  "loop": true,
  "thumbnails": {
    "el": "#thumbnails",
    "images": [
      "assets/img/components/thumb01.png",
      "assets/img/components/thumb02.png",
      "assets/img/components/thumb03.png"
    ]
  }
}'>
  <div class="swiper-wrapper">

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-warning bg-opacity-10">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">First</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-success bg-opacity-10">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Second</div>
      </div>
    </div>

    <!-- Item -->
    <div class="swiper-slide">
      <div class="ratio ratio-16x9 bg-danger bg-opacity-10">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Third</div>
      </div>
    </div>
  </div>
</div>

<!-- Thumbnails -->
<div id="thumbnails" class="swiper-thumbnails flex-nowrap"></div>

Link slides to outside content

Preview
HTML

First slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.

Second slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.

Third slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.

<!-- Link swiper slides to any content via binded-content -->
<div class="row align-items-center">
  <div class="col-md-5 mb-4 mb-md-0 pb-1 pb-md-0">

    <!-- Binded items -->
    <div class="binded-content">

      <!-- Item -->
      <div id="item1" class="binded-item active">
        <div class="ratio ratio-4x3 bg-danger bg-opacity-10">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
            <i class="ai-image text-danger opacity-80"></i>
          </div>
        </div>
      </div>

      <!-- Item -->
      <div id="item2" class="binded-item">
        <div class="ratio ratio-4x3 bg-success bg-opacity-10">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
            <i class="ai-image text-success opacity-80"></i>
          </div>
        </div>
      </div>

      <!-- Item -->
      <div id="item3" class="binded-item">
        <div class="ratio ratio-4x3 bg-warning bg-opacity-10">
          <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
            <i class="ai-image text-warning opacity-80"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-md-7 ps-xl-5">

    <!-- Swiper slider -->
    <div class="swiper" data-swiper-options='{
      "spaceBetween": 30,
      "loop": true,
      "bindedContent": true,
      "navigation": {
        "prevEl": "#prev-btn",
        "nextEl": "#next-btn"
      }
    }'>
      <div class="swiper-wrapper text-center text-md-start">

        <!-- Item -->
        <div class="swiper-slide" data-swiper-binded="#item1">
          <h3> First slide</h3>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
        </div>

        <!-- Item -->
        <div class="swiper-slide" data-swiper-binded="#item2">
          <h3> Second slide</h3>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
        </div>

        <!-- Item -->
        <div class="swiper-slide" data-swiper-binded="#item3">
          <h3> Third slide</h3>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
        </div>
      </div>

      <!-- Slider controls (Prev / next) -->
      <div class="d-flex justify-content-center justify-content-md-start pt-2">
        <button type="button" id="prev-btn" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle me-2" aria-label="Prev">
          <i class="ai-arrow-left"></i>
        </button>
        <button type="button" id="next-btn" class="btn btn-next btn-icon btn-sm btn-outline-primary rounded-circle ms-2" aria-label="Next">
          <i class="ai-arrow-rigsht"></i>
        </button>
      </div>
    </div>
  </div>
</div>

Customize theme

Colors

Typography (1rem = 16px)

Borders / Rounding

Menu

Content

Components

Utilities

Carousel (Slider)

Navigation (Prev / next buttons)

Multiple slides (Responsive) + Controls and pagination outside

Fade transition

Thumbnails

Link slides to outside content

First slide

Second slide

Third slide