44107c0734
Some checks failed
Build and publish / build (push) Failing after 19s
Source moved verbatim from mp/shop/ on 2026-04-29; mp was the first concrete adapter consuming the libreshop toolkit. Builds and publishes git.librete.ch/libreshop/shop on every main / v* push via the standard .gitea/workflows/build.yml shared across libreshop components.
58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<template>
|
|
<div class="carousel__wrapper">
|
|
<Carousel v-bind="carouselSettings">
|
|
<slot />
|
|
<template #addons>
|
|
<Navigation />
|
|
</template>
|
|
</Carousel>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import "vue3-carousel/dist/carousel.css";
|
|
import { Carousel, Navigation } from "vue3-carousel";
|
|
|
|
const carouselSettings = {
|
|
itemsToShow: 1,
|
|
wrapAround: false,
|
|
transition: 360,
|
|
autoplay: false,
|
|
gap: 20,
|
|
mouseDrag: false,
|
|
touchDrag: true,
|
|
breakpoints: {
|
|
990: {
|
|
mouseDrag: false,
|
|
touchDrag: true,
|
|
itemsToShow: 4,
|
|
snapAlign: "start",
|
|
gap: 40,
|
|
pauseAutoplayOnHover: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.carousel__prev,
|
|
.carousel__next {
|
|
@apply w-24 h-24 absolute right-auto bottom-0 top-auto rounded-full hover:shadow-sm hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 ring-gray-500 focus:ring-offset-2 bg-gray-200 bg-opacity-70 text-gray-400 text-sm transition-colors scale-75 font-bold;
|
|
left: min(7rem, calc(100% - 6rem));
|
|
}
|
|
|
|
.carousel__prev {
|
|
@apply left-0;
|
|
}
|
|
|
|
.carousel__viewport {
|
|
@apply overflow-hidden;
|
|
}
|
|
|
|
.carousel__wrapper {
|
|
.carousel__viewport {
|
|
@apply pb-28;
|
|
}
|
|
}
|
|
</style>
|