Test

index.html

@@ -15,7 +15,10 @@
         <!-- Set the value to 0 if range is from -500 to 500 -->
         <input type="range" id="slider" min="-500" max="500" value="0">
         <br>
-        <button id="resetovac">RESET</button>
+        <select id="selector">
+            <option value="0">RESET</option>
+            <option value="112">Nahodne miesto</option>
+        </select>
     </div>
     <script src="script.js"></script>
 </body>

script.js

@@ -1,11 +1,12 @@
 document.getElementById('slider').addEventListener('input', updateImagePositions);
-document.getElementById('resetovac').addEventListener('click', resetImagePositions);
+document.getElementById('selector').addEventListener('input', resetImagePositions);
 
 updateImagePositions();
 
 function resetImagePositions() {
     const slider = document.getElementById('slider');
-    slider.value = 0;
+    const selector = document.getElementById('selector');
+    slider.value = selector.value;
     updateImagePositions();
 }
 
@@ -17,6 +18,7 @@ function updateImagePositions() {
     const sliderMin = parseInt(slider.min);
 
     let sliderValue = parseInt(slider.value);
+    console.log(sliderValue);
 
     // Convert the slider value to a percentage offset within the specified range
     let sliderMovePercent = ((sliderValue - sliderMin) / (sliderMax - sliderMin) * 2 - 1) * 100;

style.css

@@ -5,13 +5,10 @@ body {
     align-items: center;
     justify-content: center;
     margin: 0;
-    overflow: hidden; /* Prevent body from scrolling */
 }
 
 #image-container {
     overflow: visible; /* Allow images to overflow */
-    width: 100vw; /* Full viewport width */
-    height: auto; /* Height determined by image heights */
     position: relative; /* Base positioning for relative image movement */
 }
 
@@ -19,7 +16,6 @@ img {
     display: block;
     position: relative; /* Relative positioning */
     transition: left 0.3s ease; /* Smooth left transition */
-    width: 100vw;
 }
 
 #slider-container {