Как сделать смену слайдов по ховеру на кнопке, отвечающий за слайд?

Question

[K G]

Здравствуйте, знакомый попросил на сайте реализовать смену слайдов по ховеру.
tahobank.ru/monitoring Вот сам сайт, слайдер в окне монитора. Слайдер сделан при помощи owl-carousel, использована urlHash навигация. Сейчас при клике на пункт справа листается к соответствующему слайду, нужно заменить клик на ховер, чтобы просто при наведении на пункт, слайд перелистывался.
Возможно ли это как-то реализовать с помощью CSS/JQuery? Исходники самой owl-carousel трогать не хочется, рассматривается так же вариант, что останется по клику и еще добавится смена по ховеру.
P.S. С JS не дружу(

Comments

[OVK2015]

Попробуйте:
var owl = $('.owl-stage');
$('[class$=slide-btn]').bind('hover', function(event)
{
switch($(this).attr('href'))
{
case '#one':{console.log('Первый');owl.trigger('to.owl.carousel', [1, 0]); break;}
case '#two':{console.log('Второй');owl.trigger('to.owl.carousel', [2, 0]); break;}
case '#three':{console.log('Третий');owl.trigger('to.owl.carousel', [3, 0]); break;}
case '#four':{console.log('Четвертый');owl.trigger('to.owl.carousel', [4, 0]); break;}
case '#five':{console.log('Пятый');owl.trigger('to.owl.carousel', [5, 0]); break;}
case '#six':{console.log('Шестой');owl.trigger('to.owl.carousel', [6, 0]); break;}
}

})

[K G]

Спасибо тебе огромное! Очень выручил, там только заметил, что с 0,0 начинать нужно.

[OVK2015]

pwnography:
Насчет 0,0 согласен. Вот более корректный для данной ситуации код :

var owl = $('.owl-stage');
$('.capabilities__list li').bind('hover', function(event)
{
if(event.type == 'mouseleave'){return false;}
switch($(this).find('a').attr('href'))
{
case '#one':
{owl.trigger('to.owl.carousel', [0, 0]); break;}
case '#two':
{owl.trigger('to.owl.carousel', [1, 0]); break;}
case '#three':
{owl.trigger('to.owl.carousel', [2, 0]); break;}
case '#four':
{owl.trigger('to.owl.carousel', [3, 0]); break;}
case '#five':
{owl.trigger('to.owl.carousel', [4, 0]); break;}
case '#six':
{owl.trigger('to.owl.carousel', [5, 0]); break;}
}
})

При hover возникает два события,- обработку mouseleave отбрасываю. Обрабатывается только mouseenter. Поэтому, мне кажется, тяжеловато будет совместить вот это

рассматривается так же вариант, что останется по клику и еще добавится смена по ховеру.

,- mouseenter обработается сразу, непонятно зачем еще и click обрабатывать. Функционал у обработчиков одинаковый

Щелкай на "Ответить",- иначе комментариев не видно

[K G]

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

[OVK2015]

pwnography:
ICQ: 665750467

Answer 1

[khipster]

Там ещё таймер прикручен. Так что придется лезть в owl-carousel.

Comments

[K G]

khipster а можете помочь с этим? или там ну прям очень геморрой?

[khipster]

pwnography: Я понятия не имею что это за карусель из сов :D

Answer 2

[Shane Matte]

Пиши на почту.

Answer 3

[Андрей Федоров]

Не знаю, сможете ли вы это использовать, но вот, без js
codepen.io/aliencash/pen/WwjvYq?editors=1100

Comments

[K G]

я нашел еще такую штуку, но не подходит(
https://codepen.io/fixcl/pen/BImgA