БлогNot. Делаем слайдер из картинок на скрипте Swiper

Делаем слайдер из картинок на скрипте 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 просмотров]


теги: список картинка javascript html css

К этой статье пока нет комментариев, Ваш будет первым