Задать вопрос

Как бы вы реализовали такой слайдер с ползунком?

59f10004b5b73220985075.png

Я знаю примерно готовое решение: Sly
Но боюсь, что он мне по какому-либо критерию может не подойти (часто возьмешь какой-нибудь slick или owl carousel, а их логика рознится с тем, что надо заказчику, даже не смотря на их многофункциональность ).

Какие еще знаете подобные слайдеры?
Имеет ли смысл писать самому специально под проект слайдер?
  • Вопрос задан
  • 1550 просмотров
Подписаться 2 Простой Комментировать
Решения вопроса 2
trushka
@trushka
А что там его писать? Поставить блоки в контейнер с overflow-x: scroll и спрятанным скроллбаром, в качестве ползунка - стилизованный input type=range, на oninput вешаете обработчик, чтоб менял scrollLeft в зависимости от величины. Можно скриптом задать input.max=container.scrollWidth-container.clientWidth, тогда можно задавать container.scrollLeft=input.value. А на container повесить обработчик onscroll, и если input не в фокусе (например, в jQuery if $(input).is(':focus') return; - чтоб не срабатывало, когда двигаешь ползунком, а не свайпом, колёсиком, стрелками на клавиатуре), то устанавливать наоборот, input.value=container.scrollLeft. ну, вот собственно и всё. Разве что ещё обработчик на колёсико поставить, чтоб колёсиком прокручивать.. хотя тут тоже осторожно надо, поскольку пользователи прокрутки жестами на тачпаде могут получить не то поведение, которое они ожидали..
Ответ написан
Комментировать
@darksladen
Slick как по мне самый лучший и гибкий слайдер! Нет такой задачи, которую бы он не решил. Вот owl мне абсолютно не понравился. Ваша задача же на слике решается без проблем, в чем у вас конкретно трудность?

https://codepen.io/anon/pen/zPOYZp - вот вам пример! Это один из множества вариантов как это можно реализовать. Так что учитесь программировать и не хейтите отличные плагины!

в data-slider указываете id слайдера если что..
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
26 дек. 2024, в 14:50
2000 руб./за проект
26 дек. 2024, в 14:40
15000 руб./за проект
26 дек. 2024, в 14:27
100000 руб./за проект