I am trying to build a dynamic image comparison slider that works with ACF repeater field. I used the html, css and js from this blog post: https://dev.to/shantanu_jana/image-comparison-slider-using-html-css-and-javascript-3cff
And it works as I need it, besides that it is not working with ACF repeater (or in general having multiple comparison sliders on one page, which is what I need)
I suppose it's because of the IDs that are needed for the JS, but I don't have enough experience to adjust the code to have it working. Can someone help? Or is it not possible?
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%)");
}
so you can use classes and document.querySelectorAll()
you can select all elements you want to select dude
let sliders = document.querySelectorAll('.my-img').value;
sliders.forEach(item => {
item.style.clipPath =
"polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)";
})
and then change the id :id="my-img"
to class :class="my-img"
then use your ACF repeater
(as you said ids must be unique and when you use repeater you make many elements with same id which is bad and you most not to do )