Вопрос или проблема
Я пытаюсь создать галерею продуктов, подобную той, что на странице продуктов Gymshark (Ссылка), для страницы моего интернет-магазина. Галерея должна работать следующим образом:
Десктопная версия:
Эскизы продуктов должны отображаться в вертикально прокручиваемом столбце с левой стороны. Когда пользователь кликает или наводит курсор на эскиз, основное изображение справа должно обновляться соответствующим образом. Индикатор прокрутки должен показывать, насколько далеко пользователь прокрутил через эскизы.
Мобильная версия:
На мобильных устройствах я хочу, чтобы галерея переключалась на горизонтальный слайдер изображений, который можно прокручивать (используя что-то вроде Swiper.js или Bootstrap carousel).
Ответ или решение
Для реализации вертикальной прокручиваемой галереи изображений с миниатюрами и использованием Swiper на мобильных устройствах, вы можете следовать нижеприведенным шагам. Мы будем использовать HTML, CSS и JavaScript вместе с библиотекой Swiper.js, которая хорошо подходит для создания слайдеров.
Шаг 1: Подключение необходимых библиотек
Сначала вам необходимо подключить библиотеку Swiper.js к вашему проекту. Вы можете сделать это, добавив следующие ссылки в ваш HTML-файл:
<!-- Подключение Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- Подключение Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>Шаг 2: HTML разметка
Создайте базовую HTML-разметку для галереи:
<div class="gallery-container">
<div class="thumbnails">
<img src="image1_thumb.jpg" data-large="image1.jpg" alt="Image 1" />
<img src="image2_thumb.jpg" data-large="image2.jpg" alt="Image 2" />
<img src="image3_thumb.jpg" data-large="image3.jpg" alt="Image 3" />
<!-- Добавьте больше миниатюр по мере необходимости -->
</div>
<div class="main-image">
<img id="main-image" src="image1.jpg" alt="Main Image" />
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg" alt="Image 1" /></div>
<div class="swiper-slide"><img src="image2.jpg" alt="Image 2" /></div>
<div class="swiper-slide"><img src="image3.jpg" alt="Image 3" /></div>
<!-- Добавьте больше слайдов по мере необходимости -->
</div>
<!-- Добавьте навигацию, если это необходимо -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>Шаг 3: CSS стили
Добавьте стили для вертикальной галереи и слайдера на мобильных устройствах:
.gallery-container {
display: flex;
}
.thumbnails {
max-height: 500px; /* Ограничить высоту для скроллинга */
overflow-y: auto;
margin-right: 20px;
flex: 0 0 150px; /* Ширина колонны миниатюр */
}
.thumbnails img {
cursor: pointer;
margin-bottom: 10px;
}
.main-image {
flex: 1;
}
@media (max-width: 768px) {
.gallery-container {
display: none; /* Скрыть вертикальную галерею на мобильных устройствах */
}
.swiper-container {
display: block;
}
}Шаг 4: JavaScript для взаимодействия с элементами
Теперь мы свяжем функциональность слайдера и взаимодействие с миниатюрами:
document.addEventListener("DOMContentLoaded", function() {
const thumbnails = document.querySelectorAll(".thumbnails img");
const mainImage = document.getElementById("main-image");
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener("click", function() {
const largeImageSrc = this.dataset.large;
mainImage.src = largeImageSrc;
});
});
// Инициализация Swiper для мобильных устройств
const swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
});
// Обновляем слайдер при выборе миниатюры
thumbnails.forEach((thumbnail, index) => {
thumbnail.addEventListener("click", function() {
swiper.slideTo(index, 1000); // Переходим к соответствующему слайду
});
});
});Заключение
Теперь у вас есть работающая галерея изображений, которая будет отображаться в вертикальном формате на настольных устройствах и менять свое представление на горизонтальный слайдер на мобильных. Не забудьте протестировать адаптивность и взаимодействие на разных устройствах, чтобы убедиться, что все работает плавно.