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

Question

[Денис Букреев]

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

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

Answer 1

[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. ну, вот собственно и всё. Разве что ещё обработчик на колёсико поставить, чтоб колёсиком прокручивать.. хотя тут тоже осторожно надо, поскольку пользователи прокрутки жестами на тачпаде могут получить не то поведение, которое они ожидали..

Answer 2

[darksladen]

Slick как по мне самый лучший и гибкий слайдер! Нет такой задачи, которую бы он не решил. Вот owl мне абсолютно не понравился. Ваша задача же на слике решается без проблем, в чем у вас конкретно трудность?

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

в data-slider указываете id слайдера если что..

Comments

[Егор Живагин]

Так сложность-то в "ползунке" внизу. В slick-e его тоже нет "из коробки"

[darksladen]

Егор Живагин, из коробки никогда не будет уникального функционала, порой нужно вырубать мозги и делать самому, иначе никуда так не уедите. Вечерком напишу и кину.

[ivanovSP]

darksladen
1) Взять slick И обмазать его костылями
2) Написать свой, разобраться с слайдерами и в будущем пилить любые слайдеры за 1 час.

P.S. еще у него зависимость от Jquery

[darksladen]

ivanovSP, посмеялся! Во-первых какие костыли? Может вы костыли вешаете, но есть нормальный способ все делать через события, благо у слика всего достаточно чтобы менять его состояние.

Свой написать и за 1 час сделать? Вы думаете на слике я больше времени трачу? И вы будете слайдер плагином всмысле писать или если у вас на странице будет 3 слайдера скажем, общего кода у них не будет?

Зависимость от jquery? У каждого инструмента наверное есть зависиомсть от jquery или не от jquery, зависимости - вполне нормальное явление. Все очень просто - сайт без jquery все же пока не очень хочется делать, поэтому если используете ее, то берите плагины, которые для нее написано - все очень просто. Если используете фреймворк(без jquery), то используете компоненты фреймворка..

Так что вы велосипедист, товарищ! =)

[darksladen]

https://codepen.io/anon/pen/zPOYZp