Slider js: Слайдер для сайта на чистом CSS и JavaScript

Шаг 3. Подключите ползунок

Наконец, добавьте следующие строки Javascript в вашего документа под ссылками из шага 1. $(window).load() требуется для обеспечения содержимого страницы загружается до инициализации плагина.

…и вуаля! Это завершает самую простую установку FlexSlider на вашу веб-страницу.

Шаг 4. Настройка в соответствии с вашими потребностями

Ниже перечислены все параметры, доступные для настройки FlexSlider в соответствии с вашими потребностями, а также их значения по умолчанию. Примеры использования этих свойств для расширенных настроек см. в разделе «Дополнительные параметры».

Немного информации о FlexSlider

О FlexSlider

FlexSlider был создан, чтобы обслуживать лучший адаптивный слайдер jQuery. Я создал несколько реализаций адаптивных ползунков в разных клиентских проектах и ​​заметил, что в этой концепции существует очевидная дыра для поддержки плагинов. Я хотел создать плагин, который обслуживал бы самых новых новичков, в то же время предоставляя опытным разработчикам инструмент, который они могли бы использовать с уверенностью. Что получилось, так это FlexSlider. Я планирую поддерживать этот плагин и оказывать поддержку пользователям, внедряющим FlexSlider на свои сайты. Адаптивный веб-дизайн может быть сложным, но я надеюсь, что FlexSlider немного упростит этот процесс.

Поддержка браузера

FlexSlider был проверен в Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+ и IE7+. Также поддерживаются устройства iOS и Android. Поддерживаются версии jQuery 1.3+.

Будущие цели

• Поддержка нескольких ползунков (поддерживается начиная с версии 1.6)
• жестов смахивания iOS (поддерживается начиная с версии 1.2)
• Callback API (поддерживается начиная с версии 1.7)
• переходов CSS3 (поддерживается с версии 1.8)
• Добавление параметров карусели (видимые слайды, количество слайдов для перемещения при анимации и т. д.)
• Поддержка пользовательских конфигураций для наименьших возможных размеров файлов.
• Дополнительные параметры темы

Известные проблемы

• На данный момент известных проблем нет. Не стесняйтесь регистрировать проблему в репозитории Github.

Список изменений

1. v1.8 : 22 октября 2011 г. — Добавлена ​​поддержка CSS3 transform3d для браузеров webkit в сочетании с прокруткой 1 к 1. Весь опыт касания был значительно улучшен по сравнению с предыдущими версиями. — Новая обработка событий изменения размера, чтобы исключить старое поведение. Слайды не остаются на месте, а перемещаются, а затем скользят назад. — Добавлено свойство «slideDirection» для поддержки «вертикального» или «горизонтального» направления скольжения.
   — Добавлено свойство «mousewheel» для поддержки прокрутки элементов слайда колесиком мыши.

   — Добавлен «slider.manualPause», который задается элементом pausePlay и может быть установлен через API обратного вызова. Это предотвратит возобновление pauseOnHover при выходе из режима наведения.

   — Убрано свойство «touchswipe» в качестве настраиваемых параметров.

   — Исправлено поведение слайдов только с двумя слайдами. Прокрутка должна происходить так, как задумано.

   — исправлена ​​привязка элемента pausePlay для запуска как сенсорного запуска, так и щелчка.

   — Примечание. В основной файл плагина добавлена ​​функция уничтожения, но она закомментирована и исключена из уменьшенной версии. Желающие могут найти функцию и документацию для реализации пользовательской функции уничтожения на основе своих собственных потребностей/триггеров событий.

2. v1.7 : 10 сентября 2011 г. — Функции API обратного вызова с параметрами start(), before(), after() и end(). Все функции должны включать один параметр для элемента слайдера. (например, start: function(slider) {}) — Crossfade был представлен с помощью новых методов CSS — свойство pausePlay добавлено для поддержки динамического элемента паузы/воспроизведения.
   — добавлено свойство animationLoop для поддержки незацикленных ползунков

   — дальнейшее улучшение CSS FlexSlider, включая взломы IE для повышения целостности кросс-браузерного дизайна

3. v1.6 : 30 августа 2011 г. — Значительные улучшения в архитектуре плагинов — Теперь возможно несколько экземпляров FlexSlider. (Пожалуйста, подумайте о своей аудитории, прежде чем сходить с ума по этому поводу) — Удалена опция «показать» анимацию в интересах других вещей. Используйте animationDuration: 0, если это необходимо.

   — CSS FlexSlider обновлен. Используйте таблицу стилей v1.6!

4. v1.5 : 27 августа 2011 г. — Улучшена поддержка мобильных устройств за счет добавления «touchstart» к связанным событиям — Реализовано решение для отсутствия резервного копирования javascript (зависит от пользователя и подготавливается к классам шаблона/модернизации html5)
5. v1.4 : 23 августа 2011 г. — Добавлено свойство «manualControls», позволяющее настраивать настраиваемую нединамическую навигацию по элементам управления. — Добавлена ​​анимация «показать», позволяющая мгновенно переходить между слайдами.
6. v1.3 : 18 августа 2011 г. — Сделана анимация слайдов с эффектом непрерывной прокрутки, а не переход назад к началу/концу. — Убран код и созданы лучшие тестовые примеры для различных сценариев слайдера.