Делаем слайдер из картинок на скрипте Swiper
Редкая главная страница сайта обходится сегодня без дурацкой карусельки из картинок, чаще всего делающейся на скрипте Swiper.
Настройки и вид по умолчанию порой не устраивают пользователей, в частности, отображение цикла картинок начинается не с экрана, на котором центрировано первое изображение, кнопки навигации влево-вправо наложены на картинки, сами изображения не кликабельны и т.п.
В интернете много решений с большим количеством стиля и кода, в которых нужно разбираться отдельно. Мы попытаемся сделать так, чтобы макет был максимально прост, а стили и код для решения поставленных задач предельно короткими.
Сначала сделаем слайдер, который ограничен по ширине в процентах от ширины окна и по высоте в пикселях, кнопки навигации при этом расположены вне картинок. Вот пример в работе, его исходник можно увидеть из исходника прикреплённой страницы.
(нажмите правой кнопкой мыши на свободном месте страницы скрипта и выберите пункт меню "Исходный код страницы", "Просмотреть исходный код" и т.п. - название команды зависит от браузера)
Мы использовали дополнительную обёртку swiper-object
, ограничивающую общую ширину раздела, а картинки вместе со стандартным "пагинатором" из точек обернули ещё в один раздел swiper-container
. Плюс начальное отображение слайдера соответствует середине первой картинки в списке (никаких отступов слева), стрелки, положение которых сдвинуто просто стилем CSS, находятся вне картинок и размеры всех картинок унифицированы независимо от того, какими они были исходно.
Это должно сработать при встраивании свайпера в макет сайта с уровня тега <body>
.
Открыть файл slider2.html (2 Кб)
Если требуется, чтобы картинки были ссылками, удобно описать всю информацию в отдельном контейнере cardData
, добавив его инициализацию к стандартному коду скрипта. В реальном приложении этот список может быть получен и программно. Теперь клик по картинке открывает нужную страницу в новой вкладке (окне). В прикреплённом файле можно увидеть, как изменился код.
Открыть файл slider3.html (3 Кб)
Некоторые браузеры могут отказаться запускать скачанный скрипт с картинками, находящимися на сервере, по протоколу file://, то есть, кликом по скачанному файлу .html. В этом случае нужно запускать скрипт с локального хоста, такого как XAMPP.
Заметим, что во многих случаях простейший стандартный код без единой строчки стиля (кроме размеров свайпа) или скрипта будет выглядеть не хуже, и меньше шансов, что он "сломается" на непривычных разрешениях экрана или макетах. Вот код на тех же пяти картинках текстом и в работе, он вставлен непосредственно в поле ввода моего сайта.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <style> .swiper { width: 800px; height: 300px; } </style> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="http://blog.kislenko.net/pictures/nsk/01.jpg"></div> <div class="swiper-slide"><img src="http://blog.kislenko.net/pictures/nsk/02.jpg"></div> <div class="swiper-slide"><img src="http://blog.kislenko.net/pictures/nsk/03.jpg"></div> <div class="swiper-slide"><img src="http://blog.kislenko.net/pictures/nsk/04.jpg"></div> <div class="swiper-slide"><img src="http://blog.kislenko.net/pictures/nsk/05.jpg"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script> const swiper = new Swiper('.swiper', { loop: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); </script>
09.10.2024, 16:06 [95 просмотров]