This is a Vue Component, BpCarousel, that’s a wrapper for Swiper. It provides a couple sets of default functionality for Swiper, but for advanced carousels you should use Swiper directly.
BpCarousel takes a single prop, variant. Beyond the default appearance, you
cant set variant="bleedRight" to switch to config settings appropriate for a
slider that starts centered and bleeds right.
<section class="carousel -bleedRight">
<div class="carousel__container">
<bp-carousel class="carousel__carousel" variant="bleedRight">
<swiper-slide>
<div class=" card -clickable -wide" @click="click($event, $refs.link)">
<div class="card__container">
<div class="card__background">
<picture class="">
<source type="image/webp" data-srcset="https://picsum.photos/640/640.webp 640w, https://picsum.photos/1024/1024.webp 1024w, https://picsum.photos/1440/1440.webp 1440w, https://picsum.photos/1920/1920.webp 1920w" data-sizes="auto" />
<img src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1920" width="1920"></svg>" alt="Placeholder Image" class="lazyload card__backgroundImg" data-srcset="https://picsum.photos/640/640 640w, https://picsum.photos/1024/1024 1024w, https://picsum.photos/1440/1440 1440w, https://picsum.photos/1920/1920 1920w" data-sizes="auto" />
</picture>
</div>
<h3 class="card__heading">One Great Heading</h3>
<p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
<div class="card__actions -attached">
<a ref="link" href="#foo" class="card__action button -primary">Learn More</a>
</div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class=" card -clickable -wide" @click="click($event, $refs.link)">
<div class="card__container">
<div class="card__background">
<picture class="">
<source type="image/webp" data-srcset="https://picsum.photos/640/640.webp 640w, https://picsum.photos/1024/1024.webp 1024w, https://picsum.photos/1440/1440.webp 1440w, https://picsum.photos/1920/1920.webp 1920w" data-sizes="auto" />
<img src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1920" width="1920"></svg>" alt="Placeholder Image" class="lazyload card__backgroundImg" data-srcset="https://picsum.photos/640/640 640w, https://picsum.photos/1024/1024 1024w, https://picsum.photos/1440/1440 1440w, https://picsum.photos/1920/1920 1920w" data-sizes="auto" />
</picture>
</div>
<h3 class="card__heading">One Great Heading</h3>
<p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
<div class="card__actions -attached">
<a ref="link" href="#foo" class="card__action button -primary">Learn More</a>
</div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class=" card -clickable -wide" @click="click($event, $refs.link)">
<div class="card__container">
<div class="card__background">
<picture class="">
<source type="image/webp" data-srcset="https://picsum.photos/640/640.webp 640w, https://picsum.photos/1024/1024.webp 1024w, https://picsum.photos/1440/1440.webp 1440w, https://picsum.photos/1920/1920.webp 1920w" data-sizes="auto" />
<img src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1920" width="1920"></svg>" alt="Placeholder Image" class="lazyload card__backgroundImg" data-srcset="https://picsum.photos/640/640 640w, https://picsum.photos/1024/1024 1024w, https://picsum.photos/1440/1440 1440w, https://picsum.photos/1920/1920 1920w" data-sizes="auto" />
</picture>
</div>
<h3 class="card__heading">One Great Heading</h3>
<p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
<div class="card__actions -attached">
<a ref="link" href="#foo" class="card__action button -primary">Learn More</a>
</div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class=" card -clickable -wide" @click="click($event, $refs.link)">
<div class="card__container">
<div class="card__background">
<picture class="">
<source type="image/webp" data-srcset="https://picsum.photos/640/640.webp 640w, https://picsum.photos/1024/1024.webp 1024w, https://picsum.photos/1440/1440.webp 1440w, https://picsum.photos/1920/1920.webp 1920w" data-sizes="auto" />
<img src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1920" width="1920"></svg>" alt="Placeholder Image" class="lazyload card__backgroundImg" data-srcset="https://picsum.photos/640/640 640w, https://picsum.photos/1024/1024 1024w, https://picsum.photos/1440/1440 1440w, https://picsum.photos/1920/1920 1920w" data-sizes="auto" />
</picture>
</div>
<h3 class="card__heading">One Great Heading</h3>
<p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
<div class="card__actions -attached">
<a ref="link" href="#foo" class="card__action button -primary">Learn More</a>
</div>
</div>
</div>
</swiper-slide>
<template #button-prev>
<div class="swiper-button-prev"></div>
</template>
<template #button-next>
<div class="swiper-button-next"></div>
</template>
<template #pagination>
<div class="swiper-pagination" slot="pagination"></div>
</template>
</bp-carousel>
</div>
</section>
<template>
<swiper
navigation
v-bind="currentVariant"
>
<slot />
</swiper>
</template>
<script setup>
import { computed } from 'vue'
import { Swiper } from 'swiper/vue'
import { Keyboard, Navigation, Pagination } from 'swiper'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
const variants = {
default: {
spaceBetween: 40,
centeredSlides: true,
pagination: {
clickable: true,
},
},
bleedRight: {
slidesPerView: 1,
spaceBetween: 0,
breakpoints: {
616: {
slidesPerView: 1.5,
spaceBetween: 40,
},
1000: {
slidesPerView: 1.75,
spaceBetween: 40,
},
1200: {
slidesPerView: 2.25,
spaceBetween: 40,
},
},
},
}
const currentVariant = computed(() => ({
modules: [Keyboard, Navigation, Pagination],
keyboard: {
enabled: true,
},
...variants[props.variant],
}))
const props = defineProps({
variant: {
type: String,
default: 'default',
},
})
</script>
@use "/resources/styles/config";
.carousel {
$b: &;
--swiper-pagination-bullet-inactive-color: white;
--swiper-pagination-color: #{config.$secondary};
--swiper-pagination-bullet-height: .875rem;
--swiper-pagination-bullet-width: .875rem;
--swiper-navigation-color: #{config.$primary};
.swiper-pagination.swiper-pagination-horizontal {
bottom: 1rem;
}
&.-bleedRight {
overflow: hidden;
#{$b}__carousel {
overflow: visible;
}
}
}