Ich habe folgendes Problem:
Am Anfang habe ich das Theme "Brooklyn" genutzt und dort auch benutzerdefinierte HTML Blöcke genutzt.
Nun möchte ich auf das Theme "Spotlight" wechseln und dort funktioniert einer meiner Codes nicht mehr. Der andere funktioniert einwandfrei, ohne, dass ich etwas ändern musste.
Liegt es daran, dass es nun ein benutzerdefiniertes Liquid ist oder verträgt sich irgendetwas mit dem Theme Code nicht?
Jedenfalls funktioniert weder die Animation, noch wird das obere Bild angezeigt.
In meinem alten Theme und auch HTML Generatoren funktioniert er problemlos. Ich hab die Bilder und Label hierfür geändert.
<div class="slider-container">
<figure>
<div id="compare"></div>
<div class="bottomleft">foto1</div>
<div class="bottomright">foto2</div>
</figure>
<input oninput="beforeAfter()" onchange="beforeAfter()" type="range" min="0" max="100" value="50" id="slider">
</div>
<style>
body {
margin: 0;
}
.slider-container {
height: 80vw;
margin: auto;
max-height: 340px;
max-width: 400px;
overflow: hidden;
width: 90vw;
}
.slider-container figure {
background-image: url(https://burst.shopifycdn.com/photos/shopify/small-business-interior_540x.jpg);
background-size: cover;
font-size: 0;
height: 100%;
margin: 0;
position: relative;
width: 100%;
}
#compare {
background-image: url(https://burst.shopifycdn.com/photos/shopify/online-shopping_540x.jpg);
background-size: cover;
bottom: 0;
border-right: 3px solid rgba(255,255,255,0.4);
height: 100%;
overflow: visible;
position: absolute;
width: 50%;
animation: first 2s 1 normal ease-in-out 0.1s;
-webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}
input#slider {
-moz-appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
cursor: col-resize;
height: 100vw;
left: 0;
margin: 0;
outline: none;
padding: 0;
position: relative;
top: -100vw;
width: 100%;
}
input#slider::-moz-range-track {
background: transparent;
}
input#slider::-ms-track {
border: none;
background-color: transparent;
height: 100vw;
left: 0;
outline: none;
position: relative;
top: -100vw;
width: 100%;
margin: 0;
padding: 0;
cursor: col-resize;
color:transparent;
}
input#slider::-ms-fill-lower {
background-color:transparent;
}
input#slider::-webkit-slider-thumb {
-webkit-appearance:none;
height: 100vw;
width: 4%;
opacity: 0;
}
input#slider::-moz-range-thumb {
-moz-appearance: none;
height: 100vw;
width: 4%;
opacity: 0;
}
input#slider::-ms-thumb {
height: 100vw;
width: 4%;
opacity:0;
}
input#slider::-ms-tooltip {
display:none;
}
#compare::before {
content: " ";
float: right;
height: 100%;
margin-right: -27px;
position: relative;
top:0;
width: 50px;
}
@keyframes first {
0% {width: 0%; }
50% {width: 80%; }
100% {width: 50%; }
}
@-webkit-keyframes first {
0% {width: 0%; }
50% {width: 80%; }
100% {width: 50%; }
}
.bottomleft {
position: absolute;
bottom: 6px;
left: 8px;
font-size: 14px;
color: #000000;
}
.bottomright {
position: absolute;
bottom: 6px;
right: 8px;
font-size: 14px;
color: #000000;
}
</style>
<script>
let slider = document.getElementById('slider');
function beforeAfter() {
document.getElementById('compare').style.width = document.getElementById('slider').value + "%";
}
slider.addEventListener('mouseup', function() {
let targetValue = 50;
let animationDuration = 1000;
let animateSlider = setInterval(function() {
if (slider.value == targetValue) {
clearInterval(animateSlider);
} else if (slider.value < targetValue) {
slider.value++;
beforeAfter();
} else if (slider.value > targetValue) {
slider.value--;
beforeAfter();
}
}, animationDuration / 100);
});
slider.addEventListener('mousemove', beforeAfter);
slider.addEventListener('touchend', function(e) {
let targetValue = 50;
let animationDuration = 1000;
let animateSlider = setInterval(function() {
if (slider.value == targetValue) {
clearInterval(animateSlider);
} else if (slider.value < targetValue) {
slider.value++;
beforeAfter();
} else if (slider.value > targetValue) {
slider.value--;
beforeAfter();
}
}, animationDuration / 100);
});
</script>
