Реализуйте различные типы слайдеров, используя Vue 3 и Swiper 7.

Используя swiper.js, мы можем интегрировать привлекательные слайдеры в различные фреймворки javascript, такие как Vue, angular, react и т. д. Он включает в себя множество параметров и эффектов, которые можно применять. чтобы сделать индивидуальный. Некоторые из них мы увидим в этой статье.

Давайте начнем.

Я предполагаю, что вы установили Vue.js (Vue 3) на свой компьютер и знакомы с его основами.

Установите swiper с помощью следующей команды.

npm i swiper

Модуль Swiper поставляется со встроенными файлами javascript и CSS, давайте воспользуемся им и приступим к реализации стандартного (базового) ползунка.

Ползунок по умолчанию

Импортируйте компоненты и стили слайдера из установленного модуля swiper следующим образом:

import { Swiper } from "swiper/vue/swiper";
import { SwiperSlide } from "swiper/vue/swiper-slide";
// Import Swiper styles
import "swiper/swiper.min.css";

Затем создайте слайды в HTML и добавьте параметры конфигурации swiper следующим образом.

<swiper
:slides-per-view="4"
:space-between="30"
@swiper="onSwiper"
@slideChange="onSlideChange"
class="default-slider">
<swiper-slide v-for="n in 7" :key="n"> {{ n }} </swiper-slide></swiper>

слайды на просмотр — сколько слайдов мы хотим видеть на экране, по умолчанию «авто»
промежуток между ними — сколько места должно быть между двумя слайдами в пикселях
slides-per-group – включает групповое скольжение, значение должно быть › 1
скорость – переход между двумя слайды за миллисекунды

Наконец, давайте применим пользовательские стили к слайдам.

<style scoped>
.default-slider .swiper-slide {
  display: flex;
  height: 300px !important;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 24px;
  font-weight: 700;
}
.swiper-slide:nth-child(1n) {
  background-color: palevioletred;
}
.swiper-slide:nth-child(2n) {
  background-color: skyblue;
}
.swiper-slide:nth-child(3n) {
  background-color: peru;
}
.swiper-slide:nth-child(4n) {
  background-color: cadetblue;
}
.swiper-slide:nth-child(5n) {
  background-color: plum;
}
.swiper-slide:nth-child(6n) {
  background-color: goldenrod;
}
.swiper-slide:nth-child(7n) {
  background-color: palegreen;
}
</style>

Swiper генерирует некоторые события, такие как swiper, slideChange и т. д., которые мы можем использовать для настройки. Окончательный код будет выглядеть так.

Чтобы настроить слайдер с использованием различных параметров, нам просто нужно импортировать модуль js и CSS для определенного параметра, который мы хотим добавить.

Ползунок навигации

Опция навигации swiper позволяет перемещать элемент при перетаскивании мышью, а также при щелчке предыдущей/следующей стрелки.

Очень просто добавить опцию включения навигации в swiper. Так же, как :navigation="true" в ‹swiper›.

В js импортируйте SwiperCore и Navigation как импортированные в заданный файл и используйте модуль Navigation с SwiperCore.

Кроме того, нам нужно импортировать сюда CSS для навигации. То есть

import "swiper/modules/navigation/navigation.min.css";

Полный код опции навигации доступен в файле ниже:

Пользовательский слайдер разбиения на страницы

Существуют различные типы нумерации страниц, предоставляемые swiper, здесь мы реализуем собственный. Это позволит менять слайд при нажатии на номер слайда.

Чтобы включить разбиение на страницы, нам нужно добавить :pagination="pagination" в ‹swiper›. Для добавления маркеров страниц (здесь это номера слайдов) нам просто нужно добавить следующий код js при загрузке страницы, который является перехватчиком данных в Vue.

pagination: {
clickable: true,
renderBullet: function (index, className) {
 return '<span class="' + className + '">' + (index + 1) + "</span>";
},
}

Полный код слайдера пагинации,

Вы также можете переопределить стили маркеров или любых других компонентов вручную или путем обновления значений переменных для переменной — swiper-pagination-bullet-size.

Ползунок стопки карт

Ползунок эффекта CoverFlow

Ползунок колесика мыши

Виртуальный слайдер

Swiper также можно настроить для добавления виртуальных слайдов с такими функциями, как добавление слайдов в начало, добавление слайдов, переход к определенному слайду и т. д.

Для этого используется атрибут Virtual вместе с Pagination и Navigation. Полный код доступен ниже.

Полный справочный код доступен по адресу Интеграция swiper в Vue 3.

Примечание. Для swiper 8 используйте следующий импорт.

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
// Import swiper styles
import 'swiper/css';                // this will import basic styles
import 'swiper/css/bundle'          // this will import all styles
import 'swiper/css/navigation';  // this will import specific styles
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

Удачного скольжения!!

Спонсор

Спасибо за вашу поддержку!
Если вам нравится то, что вы читаете, обязательно 👏 👏👏 это ниже — как писатель, это значит мир!
Подпишитесь на Canopas Software, чтобы получать обновления интересных статей!