112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<template>
|
|
<div class="image-comparison-container">
|
|
<!-- "Vorher"-Bild liegt unten -->
|
|
<img class="before-image" :src="beforeImage" alt="Vorher-Bild">
|
|
|
|
<!-- "Nachher"-Bild oben, wird durch die Breite beschnitten -->
|
|
<div class="after-image-container" :style="{ width: sliderValue + '%' }">
|
|
<img class="after-image" :src="afterImage" alt="Nachher-Bild">
|
|
</div>
|
|
|
|
<!-- Der Slider -->
|
|
<input type="range" min="0" max="100" v-model="sliderValue" class="slider">
|
|
|
|
<!-- Die vertikale Trennlinie -->
|
|
<div class="slider-line" :style="{ left: sliderValue + '%' }"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
beforeImage: String,
|
|
afterImage: String
|
|
})
|
|
|
|
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>
|
|
|