4

Добрый день!

Подскажите пожалуйста как сделать слайдер изображений для мобильных устройств с поддержкой touch.

Требования:

На экране отображается одно изображение, которое масштабируется в зависимости от размеров устройства и от ориентации устройства (сделано).

Кроме этого, данный слайдер должен поддерживать управление жестами - touch. За раз прокручивается по одному изображению. (не сделано)

Еще должна быть предусмотрена автоматическая прокрутка изображений, которую можно включать/выключать в js.

Под слайдером располагаются элементы управления - круги, которые меняют свой цвет в зависимости от текущего изображения и по клику на которые, слайдер также прокручивается.(набросал структуру)

Вот html и css - http://jsfiddle.net/Alex83/nRq5G/

Пожалуйста, помогите реализовать это чудо.

Начал сочинять, но к сожалению, пока не получается...

3
  • Первая же ссылка в Google... Запрос был "jquery banner slider". На моём Asus Tf300T вроде как крутится, хоть и тяжеловато, для мобильных устройств явно придётся что-то подправить... Можно, конечно, поискать совсем готовое решение, если сама цель именно взять готовое и не заморачиваться.
    – Spawn
    10 мая 2013 в 4:36
  • Owl карусель или Slick - обе использовал множество раз, среди demo у обеих каруселей найдёшь именно то, что тебе нужно.
    – korg
    18 мар 2016 в 0:08

1 ответ 1

1

Если нужно сделать ванильным жс, есть события touchstart touchend, берете координаты для свайпа, процентов 10% слева и 10% справа и детектите эту область Ссылка на тач события

Ссылка на координаты

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.