swiper

Начните | Документация | Демо

Шваба

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

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Спонсоры

Функции

• Дерево-шакер : только модули, которые вы используете, будут импортированы в пакет вашего приложения.
• Мобильные мобильные устройства : он предназначен для использования на мобильных веб-сайтах, мобильных веб-приложениях и мобильных нативных/гибридных приложениях.
• Библиотека агностик : Swiper не требует никаких библиотек JavaScript, таких как JQuery, что делает Swiper намного меньше и быстрее. Он может быть безопасно использовать с такими библиотеками, как jQuery, Zepto, JQuery Mobile и т. Д.
• 1: 1 Движение прикосновения : по умолчанию Swiper обеспечивает взаимодействие с сенсорным движением 1: 1, но это соотношение может быть настроено с помощью настройки Swiper.
• Наблюдатель мутации : Swiper имеет возможность включить Muttion Searner, с этой функцией Swiper будет автоматически повторно повторно и пересчитывает все необходимые параметры, если вы внесете динамические изменения в DOM или в самих стилях Swiper.
• Rich API : Swiper поставляется с очень богатым API. Это позволяет создавать собственную страницу, кнопки навигации, эффекты параллакса и многое другое.
• RTL : Swiper - единственный слайдер, который обеспечивает 100% RTL -поддержку с правильной макетом.
• Multi Row Slides Layout : Swiper позволяет с макетом нескольких рядов с несколькими слайдами на столб.
• Эффекты перехода : FADE, FLIP, 3D CUBE, 3D Coverflow.
• Двухстороннее управление : Swiper может использоваться в качестве контроллера для любого количества других швафоров и даже контролироваться одновременно.
• Полный контроль навигации : Swiper поставляется со всеми необходимыми встроенными навигационными элементами, такими как страница, стрелы навигации и прокрутка.
• Layout Flexbox : Swiper использует Modern Flexbox Layout для макета слайдов, которая решает множество проблем и времени с размером какруляциями. Такой макет также позволяет настраивать сетку слайдов с помощью чистого CSS.
• Наиболее гибкая сетка макета слайдов : Swiper имеет много параметров при инициализации, чтобы сделать ее максимально гибким. Вы можете управлять слайдами на просмотр, на колонку, на группу, пространство между слайдами и многие другие.
• Изображения ленивые загрузки : Lazy Lazy Задержка загрузки загрузки изображений в неактивных/невидимых слайдах, пока пользователь не пройдет к ним. Такая функция может сделать страницу более быстрее и улучшить производительность Swiper.
• Виртуальные слайды : Swiper поставляется с функцией виртуальных слайдов, которая великолепна, когда у вас есть много слайдов или слайдов с тяжелым содержанием/тяжелыми изображениями, так что он сохранит только необходимое количество слайдов в DOM.
• Режим петли
• Автозап
• Управление клавиатурой
• Контроль мышиного колеса
• Вложенные ползунки
• История навигация
• Хэш -навигация
• Конфигурация точек останова
• Доступность (A11Y)
• И еще много ...

Сообщество

Сообщество Swiper можно найти в дискуссиях GitHub, где вы можете задавать вопросы, голосовые идеи и поделиться своими проектами

Наш кодекс поведения применяется ко всем каналам сообщества Swiper.

Dist / Build

На производстве используются файлы (JS и CSS) только из dist/ Polder, будут наиболее стабильные версии.

Развитие сборка

Установите все зависимости, в корне репо:

$ npm install

И построить версию разработки Swiper:

$ npm run build

Результат доступен в папке dist/ .

Запуск демонстраций:

Все демонстрации, расположенные в папке ./playground . Там вы найдете Core (HTML, JS), React, Vue Versions. Чтобы открыть демонстрацию, беги:

• Ядро : npm run core
• React : npm run react
• Vue : npm run vue

Производственная сборка

$ npm run build:prod

Производственная версия будет доступна в dist/ Polder.

Внося

Все изменения должны быть привязаны только к src/ файлам. Прежде чем открыть проблему, просмотрите руководство по содействию.

Основные дорожные черты

• Верхние запросы функций (добавьте свои собственные голоса, используя реакцию?)
• Лучшие ошибки? (Добавьте свои собственные голоса, используя реакцию?)

Участники

Кодовые участники

Этот проект существует благодаря всем людям, которые вносят свой вклад. [Способствовать].

Финансовые участники

Станьте финансовым участником и помогите нам поддерживать наше сообщество. [Способствовать]