Estoy tratando de construir un control deslizante de comparación de imágenes dinámicas que funcione con el campo repetidor ACF. Usé html, css y js de esta publicación de blog: https://dev.to/shantanu_jana/image-comparison-slider-using-html-css-and-javascript-3cff
Y funciona como lo necesito, además de que no funciona con el repetidor ACF (o, en general, tiene múltiples controles deslizantes de comparación en una página, que es lo que necesito)
Supongo que se debe a las ID que se necesitan para el JS, pero no tengo suficiente experiencia para ajustar el código para que funcione. ¿Alguien puede ayudar? ¿O acaso no es posible?
HTML:
<div class="container"> <img src="<?php echo get_field( 'slider_1' ); ?>"> <img id="my-img" src="<?php echo get_field( 'slider_2' ); ?>"> <input type="range" min="0" max="100" value="50" id="slider" oninput="slide()"> </div>
CSS:
*, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; display: grid; background: #d1ebec; place-items: center; } .container{ height: 300px; width: 400px; position: relative; overflow: hidden; border: 5px solid #bfc0c1; box-shadow:-3px 5px 15px #000; } img{ width: 100%; height: 100%; position: absolute; -o-object-fit: cover; object-fit: cover; } #my-img{ clip-path: polygon(0 0 , 50% 0, 50% 100%, 0 100%); } #slider{ position: relative; -webkit-appearance: none; width: calc( 100% + 40px); height: 100%; margin-left: -20px; background-color: transparent; outline: none; } #slider::-webkit-slider-thumb{ -webkit-appearance: none; height: 45px; width: 45px; background: url("slider-icon.svg"), rgba(255,255,255,0.3); border: 4px solid white; border-radius: 50%; background-size: contain; cursor: pointer; }
JS:
function slide(){ let slideValue = document.getElementById("slider").value; document.getElementById("my-img").style.clipPath = "polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)"; console.log("polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)"); }
para que pueda usar clases y document.querySelectorAll()
puedes seleccionar todos los elementos que quieras seleccionar amigo
let sliders = document.querySelectorAll('.my-img').value; sliders.forEach(item => { item.style.clipPath = "polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)"; })
y luego cambie la identificación: id="my-img"
a class: class="my-img"
entonces usa tu repetidor ACF
(como dijiste, las identificaciones deben ser únicas y cuando usas el repetidor creas muchos elementos con la misma identificación, lo cual es malo y la mayoría no debes hacerlo)