No notes defined.
<section class="carousel -bleedRight">
<div class="carousel__container container">
<bp-carousel class="carousel__carousel" variant="bleedRight">
<swiper-slide>
<bp-clickable v-slot="{ click }">
<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>
</bp-clickable>
</swiper-slide>
<swiper-slide>
<bp-clickable v-slot="{ click }">
<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>
</bp-clickable>
</swiper-slide>
<swiper-slide>
<bp-clickable v-slot="{ click }">
<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>
</bp-clickable>
</swiper-slide>
<swiper-slide>
<bp-clickable v-slot="{ click }">
<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>
</bp-clickable>
</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
ref="mySwiper"
:options="swiperOptions"
class="foobar"
>
<slot
v-for="(_, name) in $slots"
:slot="name"
:name="name"
/>
</swiper>
</template>
<script>
import { Swiper, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
const variants = {
default: {
spaceBetween: 40,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
},
},
bleedRight: {
slidesPerView: 1,
spaceBetween: 40,
breakpoints: {
616: {
slidesPerView: 1.5,
spaceBetween: 40,
},
1000: {
slidesPerView: 1.75,
spaceBetween: 40,
},
1200: {
slidesPerView: 2.25,
spaceBetween: 40,
},
},
},
}
export default {
components: {
Swiper,
},
directives: {
swiper: directive,
},
props: {
variant: {
type: String,
default: 'default',
},
swiperOptions: {
type: Object,
default () {
return {
keyboard: {
enabled: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
...variants[this.variant],
}
},
},
},
}
</script>
.carousel {
&.-bleedRight {
overflow: hidden;
.carousel__carousel {
overflow: visible;
}
}
}