Menu
Hoping someone with OwlCarousel 2 experience can help me. I have a menu at the top and I need each menu item to go to the specified slide but its not working. I'm not getting any errors and everything else within the carousel is working correctly. I just can't get the goTo event to work. Any help would be much appreciated! Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="assets/owl.carousel.css">
<link rel="stylesheet" href="assets/owl.theme.default.css">
</head>
<body>
<nav>
<ul>
<li><a href="" class="HomeTab">Home</a></li>
<li><a href="" class="ContestInfoTab">Contest Info</a></li>
<li><a href="" class="SignUpTab">Sign Up</a></li>
<li><a href="" class="FAQTab">FAQ</a></li>
<li><a href="" class="LeaderboardTab">Leaderboard</a></li>
</ul>
</nav>
<div class="owl-carousel owl-theme" id="mainNav" style="color:#000;">
<div class="item home">
CONTENT FOR SLIDE 1
</div>
<div class="item contest">
CONTENT FOR SLIDE 2
</div>
<div class="item signup">
CONTENT FOR SLIDE 3
</div>
<div class="item faq">
CONTENT FOR SLIDE 4
</div>
<div class="item leaderboard">
CONTENTN FOR SLIDE 5
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="assets/owl.carousel.js" type='text/javascript'></script>
<script src="assets/owl.navigation.js" type='text/javascript'></script>
<script>
$(document).ready(function () {
var carousel = $("#mainNav");
carousel.owlCarousel({
slideSpeed : 500,
navigation: true,
items:1
});
$(".HomeTab").click(function(e){
e.preventDefault();
carousel.trigger('owl.goTo', 0);
});
$(".ContestInfoTab").click(function(e){
e.preventDefault();
carousel.trigger('owl.goTo', 1);
});
$(".SignUpTab").click(function(e){
e.preventDefault();
carousel.trigger('owl.goTo', 2);
});
$(".FAQTab").click(function(e){
e.preventDefault();
carousel.trigger('owl.goTo', 3);
});
$(".LeaderboardTab").click(function(e){
e.preventDefault();
carousel.trigger('owl.goTo', 4);
});
});
</script>
</body>
</html>
377
drag. owl. carousel. When the dragging of an item is started.
Can i use it for free? Yes!
There doesn't seem to be a "goTo" event in the Owl Carousel 2 Docs.
Looks like you could use to.owl.carousel instead:
carousel.trigger('to.owl.carousel', [0, 500]);
The parameters in square brackets are [position, speed].
200
var carousel = $("#carousel");
carousel.owlCarousel();
carousel.trigger("to.owl.carousel", [0, 500, true]);
At time of writing, using owl carousel version 2.0.0-beta.2.4:
The third parameter is important. Without it you will get an error. I'm not sure what the third parameter is for, as it has not been documented. However it is a boolean, and it should be set at 'true'.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
