Выпущен плагин Lightweight Slider Swiper (всего 3kb)

JavaScript Vue.js

Light-Swiper

Легкий, ориентированный на мобильные устройства, собственный плагин Swiper (3 КБ в сжатом виде). Событие касания основано на элементе и не влияет на событие касания страницы (например, пролистывание вправо для возврата на предыдущую страницу).

Рефакторинг в Swipe для достижения пользовательской ширины, смещения, бесконечного вращения, репликации событий и других функций, что делает работу более плавной.

Git-репозиторий

Если вы найдете это полезным, добро пожаловать в звездочку~

предварительный просмотр

предварительный просмотр

Установить

npm install light-swiper
// or
yarn add light-swiper

или черезscriptПредставлен в виде тегов

<script src="./swiper.min.js"></script>

Теперь вы можете использовать глобальные переменныеlightSwiper

Применение

light-swiper просто нужно следовать простым шаблонам макета, таким как:

<div class="light-swiper">
  <div class="swiper-wrap">
    <div class="swipe-item"></div>
    <div class="swipe-item"></div>
    <div class="swipe-item"></div>
    <div class="swipe-item"></div>
  </div>
</div>

Выше показана структура, которая была необходима изначально: ряд элементов, заключенных в два контейнера. В каждом элементе свайпа вы можете настроить то, что хотите. Чтобы инициализировать Swiper, требуется всего лишь простая строка кода для передачи в самый внешний DOM swiper, как показано ниже:

import Swiper from 'light-swiper'

const mySwiper = new Swiper(document.querySelector('.light-swiper'));

В дополнение к этому требуются некоторые простые стили CSS:

.light-swiper {
  overflow: hidden;
  position: relative;
}

.swiper-wrap {
  overflow: hidden;
  position: relative;
}

.swipe-item {
  float: left;
  width: 100%;
  position: relative;
}

Пользовательские параметры конфигурации

Проведите по экрану, чтобы выбрать второй параметр: [параметры]

параметр иллюстрировать Типы По умолчанию
startSlide местоположение индекса по умолчанию int 0
speed время выполнения анимации int 300
auto Будет ли воспроизводиться автоматически, входящее время переключения int -
continuous Зацикливаться ли boolean false
width Ширина одного смахивания, обычно используемая, когда необходимо предварительно просмотреть несколько свайпов. int -
offset Смещение слева, обычно используется, когда вам нужно предварительно просмотреть несколько свайпов. int -
disableScroll Отключить все сенсорные события для Swiper boolean false
stopPropagation предотвращение всплытия событий boolean false
callback обратный вызов события Function (index, currentEl)
transitionEnd событие завершения анимации Function (index, currentEl)
swiping Вызывается при смахивании с процентом (0-1) от полной ширины, которая была смахнута Function (percent)

пример

const mySwiper = new Swiper(document.querySelector('.light-swiper'), {
  width: 310,
  offset: 30,
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

API

light-swiper предоставляет следующие API, которые могут управлять смахиванием:

prev()Проведите на предыдущую страницу

next()Проведите на следующую страницу

getPos()Возвращает индекс текущей позиции

getNumSlides()Возвращает общее количество ползунков

kill()Уничтожить текущий экземпляр Swiper

совместимость

Swipe теперь совместим со всеми браузерами, включая IE7+. Swipe лучше всего работает с устройствами, которые поддерживают преобразование CSS и касание, но его также можно использовать без этих устройств. Некоторые вспомогательные методы определяют поддержку касания и перехода CSS и соответственно выбирают соответствующий метод анимации.

Кто использует свайп

  • CNN
  • Craigslist
  • Airbnb
  • NHL
  • …
Категории