通过单击猫头鹰轮播上的链接跳转到特定的幻灯片

Question

I have implemented owl carousel in my website. The Carousel Slides are related to the navigation menus. That means when i will click one of the menus the carousel will show that specific slide. I tried it with to.owl.carousel but is not working for me. I tried like-

$('#award').click(function(){
    $('#home').trigger('to.owl.carousel', 2)
});

where award is the menu id and home crousel id. 2 is the position of the slide.

My website is http://tonitro.com/test/

How can i trigger this?

Answer 1

You can use the owl.goTo event to slide your owl carousel to specific slide.

$('#home').trigger('owl.goTo', 2)

Your problem is that you don't have element with id="award" in your html, so $('#award').click will not work.

If you want to trigger the slide when you click on the Award on the top menu you should change your html there to:

<li><a href="#portfolio" id="award">Awards</a></li>

So $('#award').click will trigger click on that element