Категории

• Главная
• 1С
• 2040
• CG
• IOT умный дом
• Joomla
• Linux
• macOS
• mysql
• php
• SEO
• Windows
• Безопасность
• Железо
• Защита данных
• Простотак
• Сети LAN
• Создание сайтов
• Электрика

Адаптивный слайдер фотографий

❮ ❯

по одной фото во всю ширину

    <style>


        .slider-container {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .slider {
            display: flex;
            transition: transform 0.5s ease;
        }

        .slide {
            flex: 0 0 100%;
            height: auto;
        }

        .slide img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            object-position: center;
        }

        /* Навигационные кнопки */
        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.7);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .slider-btn:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: translateY(-50%) scale(1.1);
        }

        .slider-btn.prev {
            left: 20px;
        }

        .slider-btn.next {
            right: 20px;
        }

        /* Точки навигации */
        .dots-container {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background: white;
            transform: scale(1.2);
        }

        /* Адаптация для планшетов */
        @media (max-width: 768px) {
            .slider-btn {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }

            .slider-btn.prev {
                left: 10px;
            }

            .slider-btn.next {
                right: 10px;
            }

            .dot {
                width: 10px;
                height: 10px;
            }
        }

        /* Адаптация для мобильных */
        @media (max-width: 480px) {
            .slider-btn {
                width: 35px;
                height: 35px;
                font-size: 18px;
                opacity: 0.7;
            }

            .slider-btn.prev {
                left: 5px;
            }

            .slider-btn.next {
                right: 5px;
            }

            .dots-container {
                bottom: 10px;
                gap: 8px;
            }

            .dot {
                width: 8px;
                height: 8px;
            }
        }
    </style>


    <div class="slider-container">
        <div class="slider" id="slider">
            <div class="slide">
                <img src="https://blog.iotprof.ru/uploads/rule_done_log_raspberry.jpg" alt="Пейзаж 1">
            </div>
            <div class="slide">
                <img src="https://blog.iotprof.ru/uploads/rule_done_log_raspberry.jpg" alt="Пейзаж 2">
            </div>
            <div class="slide">
                <img src="https://blog.iotprof.ru/uploads/rule_done_log_raspberry.jpg" alt="Пейзаж 3">
            </div>
            <div class="slide">
                <img src="https://blog.iotprof.ru/uploads/rule_done_log_raspberry.jpg" alt="Пейзаж 4">
            </div>
        </div>

        <!-- Кнопки навигации -->
        <button class="slider-btn prev" id="prevBtn">❮</button>
        <button class="slider-btn next" id="nextBtn">❯</button>

        <!-- Точки навигации -->
        <div class="dots-container" id="dotsContainer"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const slider = document.getElementById('slider');
            const slides = document.querySelectorAll('.slide');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const dotsContainer = document.getElementById('dotsContainer');
            
            let currentIndex = 0;
            const totalSlides = slides.length;

            // Создаем точки навигации
            for (let i = 0; i < totalSlides; i++) {
                const dot = document.createElement('div');
                dot.classList.add('dot');
                dot.dataset.index = i;
                dotsContainer.appendChild(dot);
            }

            const dots = document.querySelectorAll('.dot');
            
            // Активируем первую точку
            updateDots();

            // Функция обновления точек
            function updateDots() {
                dots.forEach((dot, index) => {
                    if (index === currentIndex) {
                        dot.classList.add('active');
                    } else {
                        dot.classList.remove('active');
                    }
                });
            }

            // Функция переключения слайда
            function goToSlide(index) {
                if (index < 0) {
                    index = totalSlides - 1;
                } else if (index >= totalSlides) {
                    index = 0;
                }
                
                currentIndex = index;
                slider.style.transform = `translateX(-${currentIndex * 100}%)`;
                updateDots();
            }

            // Обработчики для кнопок
            prevBtn.addEventListener('click', () => {
                goToSlide(currentIndex - 1);
            });

            nextBtn.addEventListener('click', () => {
                goToSlide(currentIndex + 1);
            });

            // Обработчики для точек
            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    goToSlide(index);
                });
            });

            // Автоматическое переключение (опционально)
            // setInterval(() => {
            //     goToSlide(currentIndex + 1);
            // }, 5000);

            // Адаптивность: обновление при изменении размера окна
            window.addEventListener('resize', () => {
                // Пересчет позиции при изменении ширины
                slider.style.transform = `translateX(-${currentIndex * 100}%)`;
            });
        });
    </script>

← Назад к списку