Карусель с ползунком?

Question

[massef]

Здравствуйте.

Используется карусель owl.carousel.
Нужно добавить к ней ползунок, помимо того, что он должен двигаться если кликать на стрелки лево/право, еще нужно оставить его обычное поведение, т.е. потянуть и слайды сместились.

Хочу заметить, для любителей отправлять в гугл или говорить пиши сам. В гугле я уже был, слайдера такого не нашел. Остается пилить самому, но я плохо представляю к чему конкретно привязываться. Я не прошу давать код, я прошу подсказать что для этого нужно?
Если есть такой слайдер на примете, буду рад ссылке.

Спасибо.

Answer 1

[Александр Таратин]

darsa.in/sly

Comments

[massef]

Александр Таратин Я на него натыкался, в принципе всем устраивает, только ползунок тут динамической ширины, которая меняется в зависимости от кол-ва слайдов. А у меня он фикс. В опциях нашел только метод minHendle или как то так, вот если был бы еще и max.

[Александр Таратин]

massef: Через стили сделайте ползунок прозрачным, к нему добавьте непрозрачный элемент фиксированного размера.

[massef]

Александр Таратин Если бы все было так просто ). Я уже думал над кастомизацией ползунка. Но дело в том, что в этом случае при достижении последнего слайда или первого, ползунок не прижмется к краю. Потому что помимо динамической ширины, есть еще translateX. так же динамический. Проверял.

Answer 2

[Денис Инешин]

Добавьте к своему owl карусель Ion.RangeSlider
В опциях задайте тип "single", from: 0, to: {кол-во ваших слайдов}
+ добавьте коллбэк onChange. Внутри этого коллбэка запускайте owl-каруселевский метод goTo (или как он там называется).

В итоге получим, что тягая ползунок вы так же переключаете слайды.

Comments

[massef]

Была мысль использовать готовые ползунки, но думал это будет излишне.
Спасибо, попробую.

[Денис Инешин]

massef: вряд ли вы найдете такой комбайн всё в одном, слишком разный функционал. Так что связать 2 разных плагина - разумное решение.

[massef]

Связь есть, но работает не совсем так как нужно. jsfiddle.net/mwams6g2/1
1. Указал как вы и сказали from/to, то ли я чего то не понял, то ли не работает. Пробовал указать step 12, но доступны только 8 шагов почему то.

2. Не нашел метода в карусели, даже похожего, на оф сайте есть демка www.owlcarousel.owlgraphic.com/demos/events.html в которой отображаются сработавшие события. Всегда срабатывает changed.owl.carousel, пробовал его навестить, но в консоле выдает ошибку
"Uncaught TypeError: Cannot read property 'name' of undefined", знаю почему, нужно указать вторым значение имя, но что за имя не понятно?))
Так, что дабы просто проверить, я пока повесил на next.

3. Этот вопрос вытекает из 2го, если все таки заработает "запускающий" метод, то как карусель поймет, что нужно прокрутить право, если потянули ползунок вправо, ну и соответственно наоборот? Тут была мысль повесить два колбэка, на next и prev, но я не понял как определить это в плагине ползунка. Типо если значение больше ткущего, то крутим вправо, если меньше то влево.

Буду рад помощи разъяснить эти моменты. В скриптах не шибко силен, как видите, но я стараюсь))

[massef]

Да, и еще заметил что если просто кликнуть по кружочку ползунка, то слайдер прокручивается, что по логике быть не должно. Тут наверное все таки нужно вешать не на изменение значений, а на next/prev.

[Денис Инешин]

massef: jsfiddle.net/mwams6g2/3 нужно min и max. Я перепутал.

[massef]

Денис Инешин В общем, не получилось у меня связать эти плагины. В вашем плагине не понятно к чему привязываться при клике на кнопки next/prev. Плюс не могу определить в какую сторону я протащил ползунок, вернее могу определять только в одну сторону. Например если текущее значение value > 2 то крутим вправо jsfiddle.net/mwams6g2/5/. Вместо этой двойки по идее должна быть переменная с предыдущим значением, но как её создать не знаю.

[Денис Инешин]

1. Воспользуйтесь стабильной версией owlCarusel, а то в бетке 2.0 нету метода goTo.
Этот метод позволяет перейти на конкретный кадр, а не мудрить с next/prev.
2. У ionRangeSlider есть метод Update. Вызывайте его, чтобы обновить состояние ползунка.

Answer 3

[Роман Жаров]

Вот нашел такую штуку, может кому пригодится

Answer 4

[lnked]

Slick очень удобный слайдер использую либо его либо owl

Comments

[massef]

Эдик удобный, только вопрос в другом

[lnked]

massef: Вы спросили "Если есть такой слайдер на примете, буду рад ссылке." вот я и дал ссылку на слайдер который должен подойти

Answer 5

[v__e]

У меня получилось связать два плагина, как было предложено Денисом Инешиным.
В моей реализации надо было пролистывать слайды по 4 штуки (зеленый ползунок сдвигается вправо в соответствии с текущей страницкй)



$("#range").ionRangeSlider({
keyboard: true,
min: 1,
max: 3,
extra_classes: "team__pagination-slider",
hide_from_to: true,
hide_min_max: true,
onChange: function (data) {
const page = data.from*4 - 1;
owl.trigger('to.owl', page);

const pageText = $(".team__pagination-pages-from")[0];
$(pageText).text(data.from);
}
});

Answer 6

[Timur Yessentayev]

Может кому то пригодится, с использованием slick carousel только классы переименуйте, на бутстрапе слетает верстка https://ru.stackoverflow.com/questions/755022/%D0%...