+
-
-
-
-
-
+
+
+
diff --git a/script.js b/script.js
index 0476ee5..c57ed7e 100644
--- a/script.js
+++ b/script.js
@@ -1,28 +1,25 @@
-document.getElementById('upperSlider').addEventListener('input', updateImagePositions);
-document.getElementById('lowerSlider').addEventListener('input', updateImagePositions);
+document.getElementById('slider').addEventListener('input', updateImagePositions);
+document.getElementById('resetovac').addEventListener('click', resetImagePositions);
+
updateImagePositions();
+
+function resetImagePositions() {
+ const slider = document.getElementById('slider');
+ slider.value = 0;
+ updateImagePositions();
+}
+
function updateImagePositions() {
- const upperSlider = document.getElementById('upperSlider');
- const lowerSlider = document.getElementById('lowerSlider');
+ const slider = document.getElementById('slider');
// Extract settings directly from HTML element attributes
- const maxOffset = 50; // Set the maximum movement range in percentage
- const upperMax = parseInt(upperSlider.max);
- const upperMin = parseInt(upperSlider.min);
- const lowerMax = parseInt(lowerSlider.max);
- const lowerMin = parseInt(lowerSlider.min);
+ const sliderMax = parseInt(slider.max);
+ const sliderMin = parseInt(slider.min);
- let upperValue = parseInt(upperSlider.value);
- let lowerValue = parseInt(lowerSlider.value);
+ let sliderValue = parseInt(slider.value);
// Convert the slider value to a percentage offset within the specified range
- let upperMovePercent = ((upperValue - upperMin) / (upperMax - upperMin) * 2 - 1) * maxOffset;
- let lowerMovePercent = ((lowerValue - lowerMin) / (lowerMax - lowerMin) * 2 - 1) * maxOffset;
+ let sliderMovePercent = ((sliderValue - sliderMin) / (sliderMax - sliderMin) * 2 - 1) * 100;
- // Apply transformation based on the upper slider for image1
- document.getElementById('image1').style.transform = `translateX(${upperMovePercent}%)`;
-
- // Calculate cumulative transformation for image2
- let totalMovePercent = upperMovePercent + lowerMovePercent;
- document.getElementById('image2').style.transform = `translateX(${totalMovePercent}%)`;
+ document.getElementById('image2').style.transform = `translateX(${sliderMovePercent}%)`;
}
diff --git a/style.css b/style.css
index e1fd2b2..78d5e77 100644
--- a/style.css
+++ b/style.css
@@ -8,7 +8,7 @@ body {
overflow: hidden; /* Prevent body from scrolling */
}
-.image-container {
+#image-container {
overflow: visible; /* Allow images to overflow */
width: 100vw; /* Full viewport width */
height: auto; /* Height determined by image heights */
@@ -18,13 +18,16 @@ body {
img {
display: block;
position: relative; /* Relative positioning */
- transform: translateX(-50%); /* Center horizontally */
transition: left 0.3s ease; /* Smooth left transition */
- max-width: none; /* Prevent scaling */
+ width: 100vw;
}
-.slider-container {
+#slider-container {
position: relative; /* Ensure sliders are positioned relative to the viewport */
width: 100%; /* Full width sliders */
z-index: 1000; /* Above images for easier access */
}
+
+#slider {
+ width: 100%;
+}
\ No newline at end of file
+