Swiper

Most modern mobile touch slider.

It has been observed that using Swiper inside a container can cause issues at certain window widths.

It is recommended to use it in a 100% ViewPort element like a Hero section.

If you encounter issues with Swiper, please use Carousel instead.

Default

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Navigation

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper navigation>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Pagination

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper :pagination="{ type: 'bullets', clickable: true }">
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Pagination Dynamic

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper :pagination="{ dynamicBullets: true, clickable: true }">
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Pagination Progress

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  :pagination="{ type: 'progressbar', clickable: true }"
  navigation
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Pagination Progress with Thumbs

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  :thumbs="{ swiper: '#swiper-pagination-progress-thumbs' }"
  :space-between="8"
  navigation
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
 <Swiper
  id="swiper-pagination-progress-thumbs"
  :space-between="8"
  :slides-per-view="4"
  :free-mode="true"
  :watch-slides-progress="true"
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Pagination Fraction

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  :pagination="{ type: 'fraction', clickable: true }"
  navigation
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Space Between

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  :space-between="12"
  :pagination="{ type: 'bullets', clickable: true }"
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Slides Per View

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  navigation
  :slides-per-view="3"
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Slides Per View Auto

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  navigation
  slides-per-view="auto"
 >
  <SwiperSlide>
   <b-img
    style="width: 60%"
    fluid
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    style="width: 60%"
    fluid
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    style="width: 60%"
    fluid
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    style="width: 60%"
    fluid
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    style="width: 60%"
    fluid
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    style="width: 60%"
    fluid
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Responsive Breakpoint

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  navigation
  :slides-per-view="1"
  :space-between="4"
  :breakpoints="{
   576: {
    slidesPerView: 1,
    spaceBetween: 4,
   },
   768: {
    slidesPerView: 2,
    spaceBetween: 4,
   },
   992: {
    slidesPerView: 3,
    spaceBetween: 8,
   },
  }"
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Centered

There is a confirmed issue with this feature.

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  navigation
  :slides-per-view="3"
  :space-between="8"
  centered-slides
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Freemode

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  navigation
  :slides-per-view="3"
  :space-between="8"
  centered-slides
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Infinite Loop

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  navigation
  loop
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Effect Mode

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  navigation
  effect="fade"
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Autoplay

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  navigation
  :pagination="{ clickable: true }"
  :autoplay="{
   delay: 2500,
   disableOnInteraction: false,
  }"
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Equal Height

“ This platform offers an incredible array of features and a sleek design. ”
“ I intend to integrate this solution into multiple projects, it's that good. ”
“ Exceptional design paired with comprehensive documentation and stellar support. ”
“ The variety of landing page options is a significant advantage. ”
“ The user interface is intuitive and the features are robust. ”
“ A versatile tool that adapts to various project requirements seamlessly. ”
vue
<template>
 <Swiper navigation>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ This platform offers an incredible array of features and a sleek design. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ I intend to integrate this solution into multiple projects, it's that good. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ Exceptional design paired with comprehensive documentation and stellar support. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ The variety of landing page options is a significant advantage. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ The user interface is intuitive and the features are robust. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ A versatile tool that adapts to various project requirements seamlessly. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
 </Swiper>
</template>

Auto Height

“ This platform offers an incredible array of features and a sleek design. ”
“ I intend to integrate this solution into multiple projects, it's that good. ”
“ Exceptional design paired with comprehensive documentation and stellar support. ”
“ The variety of landing page options is a significant advantage. ”
“ The user interface is intuitive and the features are robust. ”
“ A versatile tool that adapts to various project requirements seamlessly. ”
vue
<template>
 <Swiper
  navigation
  :auto-height="true"
 >
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ This platform offers an incredible array of features and a sleek design. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ I intend to integrate this solution into multiple projects, it's that good. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ Exceptional design paired with comprehensive documentation and stellar support. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ The variety of landing page options is a significant advantage. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ The user interface is intuitive and the features are robust. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
  <SwiperSlide>
   <Card background-color="primary-subtle">
    <CardBody>
     <BBlockquote>“ A versatile tool that adapts to various project requirements seamlessly. ”</BBlockquote>
    </CardBody>
   </Card>
  </SwiperSlide>
 </Swiper>
</template>

Thumbs Gallery

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  :thumbs="{ swiper: '#swiper-pagination-progress-thumbs' }"
  :space-between="8"
  navigation
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
 <Swiper
  id="swiper-pagination-progress-thumbs"
  :space-between="8"
  :slides-per-view="4"
  free-mode
  watch-slides-progress
  watch-slides-visibility
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>

Preloader

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <Swiper
  navigation
  :slides-per-view="3"
  :space-between="8"
 >
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=One"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Two"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Three"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Four"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Five"
    alt="Image Description"
   />
  </SwiperSlide>
  <SwiperSlide>
   <b-img
    fluid
    relative-width="100"
    src="https://placehold.jp/32/084298/ffffff/1280x180.png?text=Six"
    alt="Image Description"
   />
  </SwiperSlide>
 </Swiper>
</template>