Как сделать тач слайдер
Обновлено: 05.07.2024
Peppermint.js — еще один тач-слайдер. Только круче.
- Работает с мышью, тачэвентами, поинтерэвентами, старыми поинтерэвентами из IE10
- Работает на андроидах, айфонах, винфонах, блекберри и на девайсах с 8 виндой
- Работает в IE7+
- Не зависит от сторонних библиотек. Если находит jQuery, регистрирует себя в качестве плагина.
- Использует CSS3 трансформы и транзишены с фоллбеком на анимации по таймеру
- 7,7 Кб кода
- Оптимизированные на скорость выполнения touch -функции и callback-функции для расширений
- Работает с клавиатурой, не ломается от кнопки Tab
Комплект
-
— минифицированный скрипт для продакшена — обязательный набор стилей для корректной работы слайдера — дефолтный набор стилей, чтобы было с чего начать (включает обязательные стили)
Запуск
Или javascript + jQuery:
Класс peppermint-inactive не обязателен. Он заменяется на peppermint-active во время установки.
Вместо figure можно использовать любой другой тег. Если используете figure , не забудьте подключить html5shiv, чтобы старые IE не удивлялись HTML5-тегам.
Внутрь каждого слайда можно положить все что захочется.
Настройки
В качестве второго параметра (первого в случае использования jQuery) в Peppermint можно передать объект с настройками. Настройки по умолчанию:
Примеры использования
При инициализации Peppermint возвращает объект с функциями, которые можно использовать для управления слайдером и расширения функционала:
slideTo(n) — перейти к слайду n ;
next() — следующий слайд;
prev() — предыдущий слайд;
start() — запустить слайдшоу;
stop() — остановить слайдшоу;
pause() — приостановить слайдшоу до следующей смены слайда;
getCurrentPos() — получить номер текущего слайда;
getSlidesNumber() — получить общее количество слайдов;
recalcWidth() — пересчитать ширину слайдера и слайдов. Полезно при изменении ширины контейнера. При ресайзе окна и смене ориентации девайса пересчет ширины запустится сам.
ВСЕ СЛАЙДЕРЫ В ПРИМЕРАХ РАБОТАЮТ БЕЗ СКРИПТОВ. Для установки любого слайдера на свой сайт нужно скопировать HTML разметку и CSS:
Пример 1: Маленький слайдер с автоматической прокруткой фото
Это самый простой слайдер без возможности самостоятельного скроллинга фотографий. Рекомендуемый размер изображений 500x300px.
HTML разметка
CSS оформление
Пример 2: Слайдер, стилизованный под рамку картины
Рекомендуемый размер изображений 400x300px. Слайдер отображается ровно по центру страницы. Адаптива под мобильные устрайства - нет. Если вы новичок в веб, то корректно установить данный слайдер себе на сайт будет проблематично из-за абсолютного позиционирования. Используются тени (box-shadow). Есть возможность самостоятельно скроллить фото. Radio кнопки для прокрутки изображений появляются при наведении мышки.
HTML разметка
CSS оформление
Пример 3: Обычный слайдер со стрелками - вперед и назад
Рекомендуемый размер изображений 960x640px. Слайдер полностью адаптирован под мобильные устройства. Есть возможность подписывать названия слайдов. Для отображения стрелочек - вперед и назад, - используется стандартный набор иконок font-awesome. На мой взгляд этот слайдер самый оптимальный.
Слайдер 1
Слайдер 2
Слайдер 3
Слайдер 4
Код слишком большой, поэтому не выкладываю его. Скачивайте пример.
Пример 4: Слайдер с простой анимацией
Рекомендуемый размер изображений 610x420px. Адаптива нет! Слайдер имеет огромные стрелочки - вперед и назад. Используется анимация, будто картинка падает вниз.
Код этого слайдера большой, поэтому не выкладываю его. Скачивайте пример.
Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?
Похожие статьи:
Комментарии ( )
Подскажите пожалуйста, не могу никак решить этот вопрос, мне надо первый слайдер который автоматически меняет слайды, но если я добавлю 8 картинок то они не работают как надо и наслаиваются друг на друга, как можно этот вопрос решить? Вроде бы делал по аналогии не не вышло :(
Здравствуйте, я использовал ваш пример для 8 картинок и у меня нет проблем с наслаиванием друг на друга. Вот архив, если это как-то поможет:
Да, но там мне на другом сайте подсказали, если картинок больше тогда надо вот этот параметр менять
25%
40%
и время round 16s поменять на 32s так как шаг идет 4 секунды. А это полный перезапуск этого движения. И получается накладывалась картинка на 16 секунде 1 изображения на 5 и так далее.
Помогите, пожалуйста. Не могу поменять размер слайда. мне нужно не 500px, а 100% или 1200px, и вставить 6 картинок.
Вот код:
.slider margin: 50px auto;
width: 74%;
height:200px;
overflow:hidden;
position:relative
>
.slider_css position: absolute;
animation: round 24s infinite;
opacity: 0;
width: 100%;
>
@keyframes round 16.6%
26.6%
>
img:nth-child(1)
img:nth-child(2)
img:nth-child(3)
img:nth-child(4)
img:nth-child(5)
img:nth-child(6)
@media(min-width:0px) and (max-width:600px) .slider
>
@media(min-width:601px) and (max-width:1200px) .slider
>
На многих известных нам мобильных сайтах для тач-устройств, например, для iPhone или Android, листалки (слайдеры) устроены так, что они двигаются уже после свайп-жеста. То есть анимация запускается уже после того, как человек проскользил по листалке пальцем и убрал его. В некоторых случаях на листалку можно просто нажать, а она будет реагировать так, будто это был свайп-жест. Это не так красиво и не так удобно, как в слайдерах, например, на главных экранах iOS-устройств.
Команда мобильного поиска Яндекса сделала плагин, с помощью которого можно сделать слайдер для сайта похожим на те, что работают в тач-телефонах.
Слайдер, созданный с применением этого плагина, двигается прямо вслед за пальцем. Он понимает длину жеста и его ускорение. Например, если свайп длинный, то и прокрутка соответствующая, если проскользить пальцем резко и быстро - поедет быстро и т.д. Если чуть не дотянуть, слайдер вернется к исходной позиции или сам доедет до следующей - зависит от того, какая ближе.
Посмотреть его в действии можно например, в ответе Погоды или Картинок на серпе Яндекса для iOS (QR-код).
Прочитать больше о таком слайдере можно здесь. А скачать сам плагин - тут.
LinkedIn обновила мобильные версии для Android и iPhone
Как сообщает техноблог TechСrunch, профессиональная социальная сеть LinkedIn приступила к обновлению ряда мобильных приложений, в том числе, для Android и iPhone
UPD:Google покупает Motorola Mobility
Google покупает Motorola Mobility, американскую компанию-производителя мобильных устройств за $12.5 миллиардов
Apple подала в суд на крупнейших производителей устройств на Android
Патентная война Apple Inc против производителя планшетов Samsung Electronics может преследовать цель ослабить позиции Google Inc на этом рынке
Новая версия поиска Google для мобильных
Случайный пост в мобильном блоге Google, который был в скором времени удален, рассказал о новых возможностях приложения Google Search для Android
Мобильный мессенджер от Facebook доступен для iOS и Android
Виджет Метрики для главной страницы Яндекса
Команда Я.Метрики сообщила о появлении виджета Метрики, позволяющего быстро посмотреть статистику посещений нужного сайта прямо на главной странице Яндекса
Данная фотогалерея интересна тем, что позволяет выводить фотографии общим списком, например в виде миниатюр, при нажатии на которые происходит открытие полноценного слайдера, где все фотографии можно посмотреть подробнее.
Эта галерея работает на основе библиотеки touchTouch.jquery.js и jQuery v1.9.1. В ссылках ниже вы сможете просмотреть ее работу и скачать все исходники. Как говорилось ранее, основной список задается миниатюрами (если нет времени их создавать, то просто грузите за место них полные версии картинок, как я в своем примере). Каждой миниатюре можно задать подпись если это необходимо. При нажатии на картинку откроется слайдер с соответствующей позиции, где будут стрелки навигации, с помощью которых можно будет перелистовать изображения в обе стороны.
Чтобы вставить картинку пишите в внутри тега с классом container_12 следующее:
Здесь images/main.jpg - ссылка на полную версию картинки, images/sl.jpg - ссылка на миниатюру картинки, Атмосфера - подпись к картинке.
Кстати, галерея использует bootstrap верстку, поэтому у кого она подключена результаты внешнего вида могут сильно различаться на разных сайтах. Но, думаю, не стоит напоминать, что внешний вид можно менять как угодно, используя правила css верстки.
Читайте также: