modified: begushiybashkir/src/index.html

modified:   begushiybashkir/src/scripts/script.js
	modified:   begushiybashkir/src/style/mobile.css
	modified:   begushiybashkir/src/style/slider.css
add controls button to slider

begushiybashkir/src/index.html

@@ -285,10 +285,16 @@
               alt="Беговой клуб, общее фото"
             />
           </div>
+          
           <div class="slider-controls">
             <button class="slider-prev">←</button>
             <button class="slider-next">→</button>
           </div>
+
+          <div class="slider-indicator" id="sliderIndicator">
+            <!-- точки будут добавлены через JavaScript -->
+          </div>
+
         </div>
       </div>
     </section>

begushiybashkir/src/scripts/script.js

@@ -11,40 +11,74 @@ window.onload = () => {
     const slides = document.querySelectorAll('.slider img');
     const prevBtn = document.querySelector('.slider-prev');
     const nextBtn = document.querySelector('.slider-next');
+    const indicatorContainer = document.getElementById('sliderIndicator');
     let currentSlide = 0;
     const slideCount = slides.length;
 
+    // Создаем индикаторы (точки)
+    function createIndicators() {
+        for (let i = 0; i < slideCount; i++) {
+            const dot = document.createElement('div');
+            dot.classList.add('slider-dot');
+            if (i === 0) dot.classList.add('active');
+
+            dot.addEventListener('click', () => {
+                currentSlide = i;
+                updateSlider();
+            });
+
+            indicatorContainer.appendChild(dot);
+        }
+    }
+
     function updateSlider() {
-        const offset = -currentSlide * 100; // Сдвигаем контейнер
+        const offset = -currentSlide * 100;
         sliderContainer.style.transform = `translateX(${offset}%)`;
+
+        // Обновляем активную точку
+        document.querySelectorAll('.slider-dot').forEach((dot, index) => {
+            dot.classList.toggle('active', index === currentSlide);
+        });
     }
 
     nextBtn.addEventListener('click', () => {
         currentSlide = (currentSlide + 1) % slideCount;
         updateSlider();
+        resetAutoSlide(); // Сброс автослайда при ручном управлении
     });
 
     prevBtn.addEventListener('click', () => {
         currentSlide = (currentSlide - 1 + slideCount) % slideCount;
         updateSlider();
+        resetAutoSlide(); // Сброс автослайда при ручном управлении
     });
 
     // Автопрокрутка
-    let slideInterval = setInterval(() => {
+    let slideInterval;
-        currentSlide = (currentSlide + 1) % slideCount;
-        updateSlider();
-    }, 5000);
 
+    function startAutoSlide() {
+        slideInterval = setInterval(() => {
+            currentSlide = (currentSlide + 1) % slideCount;
+            updateSlider();
+        }, 5000);
+    }
+
+    function resetAutoSlide() {
+        clearInterval(slideInterval);
+        startAutoSlide();
+    }
+
+    // Останавливаем автослайд при наведении
     sliderContainer.addEventListener('mouseenter', () => {
         clearInterval(slideInterval);
     });
 
     sliderContainer.addEventListener('mouseleave', () => {
-        slideInterval = setInterval(() => {
+        startAutoSlide();
-            currentSlide = (currentSlide + 1) % slideCount;
-            updateSlider();
-        }, 5000);
     });
 
+    // Инициализация
+    createIndicators();
     updateSlider();
+    startAutoSlide();
 };

begushiybashkir/src/style/mobile.css

@@ -0,0 +1,21 @@
+/* Адаптивность для мобильных */
+@media (max-width: 768px) {
+    .slider-controls {
+        bottom: 10px;
+    }
+    
+    .slider-prev, .slider-next {
+        width: 35px;
+        height: 35px;
+        font-size: 16px;
+    }
+    
+    .slider-indicator {
+        bottom: 5px;
+    }
+    
+    .slider-dot {
+        width: 10px;
+        height: 10px;
+    }
+}

begushiybashkir/src/style/slider.css

@@ -23,4 +23,60 @@
     height: 100%;
     object-fit: cover; /* Сохраняет пропорции, обрезает лишнее */
     object-position: center; /* Центрирует изображение */
+}
+/* Кнопки управления слайдером */
+.slider-controls {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 20px;
+    z-index: 10;
+}
+
+.slider-prev, .slider-next {
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: 2px solid white;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.slider-prev:hover, .slider-next:hover {
+    background-color: rgba(255, 255, 255, 0.9);
+    color: black;
+    transform: scale(1.1);
+}
+
+/* Индикатор текущего слайда */
+.slider-indicator {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+}
+
+.slider-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.slider-dot.active {
+    background-color: white;
+    transform: scale(1.2);
 }