127 lines
3.4 KiB
Svelte
127 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte"
|
|
import { register } from "swiper/element/bundle"
|
|
import MedialibImage from "../widgets/MedialibImage.svelte"
|
|
export let images: string[]
|
|
export let imageHoverEffect: boolean
|
|
export let forceFullHeight: boolean
|
|
register(false)
|
|
let swiper: any
|
|
onMount(async () => {
|
|
if (swiper !== undefined) {
|
|
const response = await fetch("/dist/index.css"),
|
|
cssText = await response.text(),
|
|
params ={
|
|
injectStyles: [cssText],
|
|
}
|
|
Object.assign(swiper, params)
|
|
swiper.initialize()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
{#if images.length > 1}
|
|
<div class="default-swiper">
|
|
<swiper-container
|
|
bind:this={swiper}
|
|
slides-per-view="1"
|
|
loop={true}
|
|
direction="horizontal"
|
|
effect="slide"
|
|
autoplay-delay="2500"
|
|
mousewheel={true}
|
|
navigation={true}
|
|
init={false}
|
|
speed="600"
|
|
class="relative"
|
|
>
|
|
{#each images as image (image)}
|
|
<swiper-slide class="relative">
|
|
<div
|
|
class:imageHoverEffect={imageHoverEffect}
|
|
class="image-container"
|
|
>
|
|
<MedialibImage
|
|
id={image}
|
|
filter={typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}
|
|
/>
|
|
</div>
|
|
</swiper-slide>
|
|
{/each}
|
|
</swiper-container>
|
|
</div>
|
|
{:else if images[0]}
|
|
<div
|
|
class="image-container single flex"
|
|
class:forceFullHeight={forceFullHeight}
|
|
class:imageHoverEffect={imageHoverEffect}
|
|
>
|
|
<MedialibImage
|
|
id={images[0]}
|
|
filter={typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/variables.less";
|
|
|
|
:global .default-swiper {
|
|
flex: 2 !important;
|
|
.swiper-button-prev,
|
|
.swiper-button-next {
|
|
transform-origin: left;
|
|
color: #333;
|
|
transform: scale(0.3);
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
top: 50%;
|
|
padding: 10px;
|
|
height: 70px;
|
|
width: 70px;
|
|
border-radius: 50px;
|
|
}
|
|
.swiper-button-prev {
|
|
left: 6%;
|
|
}
|
|
.swiper-button-next {
|
|
right: 6%;
|
|
transform-origin: right;
|
|
}
|
|
|
|
swiper-container {
|
|
width: 100%;
|
|
swiper-slide {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-container {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
overflow: visible;
|
|
max-width: @body-maxwidth;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
:global &.imageHoverEffect:hover img {
|
|
transform: scale(1.05);
|
|
transform-origin: center;
|
|
}
|
|
:global & > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
:global &.forceFullHeight img {
|
|
width: unset;
|
|
}
|
|
@media @mobile {
|
|
:global & > img {
|
|
height: 90% !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|