• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

136
Vistas
Ajuste el código para permitir el uso del campo repetidor ACF para el control deslizante de comparación de imágenes

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%)"); }
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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)

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda