2024-05-02 11:30:46 +02:00
|
|
|
document.getElementById('slider').addEventListener('input', updateImagePositions);
|
|
|
|
document.getElementById('resetovac').addEventListener('click', resetImagePositions);
|
|
|
|
|
2024-04-22 19:28:46 +02:00
|
|
|
updateImagePositions();
|
2024-05-02 11:30:46 +02:00
|
|
|
|
|
|
|
function resetImagePositions() {
|
|
|
|
const slider = document.getElementById('slider');
|
|
|
|
slider.value = 0;
|
|
|
|
updateImagePositions();
|
|
|
|
}
|
|
|
|
|
2024-04-22 19:28:46 +02:00
|
|
|
function updateImagePositions() {
|
2024-05-02 11:30:46 +02:00
|
|
|
const slider = document.getElementById('slider');
|
2024-04-22 19:28:46 +02:00
|
|
|
|
|
|
|
// Extract settings directly from HTML element attributes
|
2024-05-02 11:30:46 +02:00
|
|
|
const sliderMax = parseInt(slider.max);
|
|
|
|
const sliderMin = parseInt(slider.min);
|
2024-04-22 19:28:46 +02:00
|
|
|
|
2024-05-02 11:30:46 +02:00
|
|
|
let sliderValue = parseInt(slider.value);
|
2024-04-22 19:28:46 +02:00
|
|
|
|
|
|
|
// Convert the slider value to a percentage offset within the specified range
|
2024-05-02 11:30:46 +02:00
|
|
|
let sliderMovePercent = ((sliderValue - sliderMin) / (sliderMax - sliderMin) * 2 - 1) * 100;
|
2024-04-22 19:28:46 +02:00
|
|
|
|
2024-05-02 11:30:46 +02:00
|
|
|
document.getElementById('image2').style.transform = `translateX(${sliderMovePercent}%)`;
|
2024-04-22 19:28:46 +02:00
|
|
|
}
|