FROM CACHE - de_header

Benutzerdefiniertes HTML Funktioniert In Neuem Shopify Theme Nicht Mehr

ninja196
Besucher
3 0 0

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>
1 ANTWORT 1

Gabe
Shopify Staff
16897 2679 3950

Besprechen wir gerade hier.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog