Bootstrap
Extend
Integration
Snippets
Examples

Swiper

Most modern mobile touch slider.

Swiperはコンテナの内側などで利用すると特定のウィンドウ幅で問題が発生することが確認されています。

Heroなど100%のViewPortで利用する必要があります。

Swiperで問題がある場合には、Carouselを利用してください。

Default

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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