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">
    <div class="carousel__container">
        <bp-carousel class="carousel__carousel">
            <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=&quot;http://www.w3.org/2000/svg&quot; height=&quot;1920&quot; width=&quot;1920&quot;></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=&quot;http://www.w3.org/2000/svg&quot; height=&quot;1920&quot; width=&quot;1920&quot;></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=&quot;http://www.w3.org/2000/svg&quot; height=&quot;1920&quot; width=&quot;1920&quot;></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=&quot;http://www.w3.org/2000/svg&quot; height=&quot;1920&quot; width=&quot;1920&quot;></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>
        </bp-carousel>
    </div>

</section>
  • Content:
    <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>
    
  • URL: /components/raw/carousel/BpCarousel.vue
  • Filesystem Path: resources/styles/organisms/carousel/BpCarousel.vue
  • Size: 1.2 KB
  • Content:
    @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;
            }
        }
    }
    
  • URL: /components/raw/carousel/_index.scss
  • Filesystem Path: resources/styles/organisms/carousel/_index.scss
  • Size: 517 Bytes