126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
Vue
<template>
|
|
<div class="image-comparison-container">
|
|
<!-- „Vorher“-Bild liegt unten -->
|
|
<NuxtImg
|
|
class="before-image"
|
|
provider="strapi"
|
|
:src="beforeImage"
|
|
alt="Vorher-Bild"
|
|
format="webp"
|
|
loading="lazy"
|
|
/>
|
|
|
|
<!-- „Nachher“-Bild oben, Breite = Slider-Wert -->
|
|
<div class="after-image-container" :style="{ width: sliderValue + '%' }">
|
|
<NuxtImg
|
|
class="after-image"
|
|
provider="strapi"
|
|
:src="afterImage"
|
|
alt="Nachher-Bild"
|
|
format="webp"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Slider -->
|
|
<input v-model="sliderValue" type="range" min="0" max="100" class="slider" />
|
|
|
|
<!-- Vertikale Trennlinie -->
|
|
<div class="slider-line" :style="{ left: sliderValue + '%' }" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
defineProps({
|
|
beforeImage: { type: String, required: true },
|
|
afterImage: { type: String, required: true }
|
|
})
|
|
|
|
const sliderValue = ref(60) // Startposition in der Mitte
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.image-comparison-container
|
|
position: relative
|
|
width: 100%
|
|
height: auto
|
|
aspect-ratio: 12 / 9
|
|
user-select: none
|
|
overflow: hidden
|
|
|
|
.after-image,
|
|
.before-image
|
|
width: auto
|
|
height: 100%
|
|
object-fit: cover
|
|
display: block
|
|
|
|
.after-image-container
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
height: 100%
|
|
overflow: hidden
|
|
pointer-events: none
|
|
|
|
img
|
|
width: auto
|
|
height: 100%
|
|
object-fit: cover
|
|
|
|
|
|
|
|
/* Slider */
|
|
.slider
|
|
position: absolute
|
|
top: 50%
|
|
left: 0
|
|
width: 100%
|
|
height: 8px // Slider-Höhe anpassen
|
|
transform: translateY(-50%)
|
|
appearance: none
|
|
background: transparent
|
|
cursor: pointer
|
|
z-index: 10
|
|
-webkit-appearance: none
|
|
-moz-appearance: none
|
|
|
|
&::-webkit-slider-thumb
|
|
appearance: none
|
|
width: 20px // Breite des Schiebereglers
|
|
height: 20px // Höhe des Schiebereglers
|
|
border-radius: 50%
|
|
background: $pink
|
|
border: 1px solid #fff
|
|
cursor: pointer
|
|
z-index: 15
|
|
|
|
&::-moz-range-thumb
|
|
width: 20px
|
|
height: 20px
|
|
border-radius: 50%
|
|
background: $pink
|
|
border: 1px solid #fff
|
|
cursor: pointer
|
|
|
|
&::-ms-thumb
|
|
width: 20px
|
|
height: 20px
|
|
border-radius: 50%
|
|
background: $pink
|
|
border: 1px solid #fff
|
|
cursor: pointer
|
|
|
|
/* Vertikale Trennlinie */
|
|
.slider-line
|
|
position: absolute
|
|
top: 0
|
|
width: 4px
|
|
height: 100%
|
|
background: white
|
|
border-radius: 2px
|
|
z-index: 5
|
|
</style>
|
|
|