Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

OwlCarousel 2 .goTo event not working

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>
like image 377
user3022992 Avatar asked Oct 22 '14 20:10

user3022992


People also ask

How do you trigger an owl carousel?

drag. owl. carousel. When the dragging of an item is started.

Is owl carousel free?

Can i use it for free? Yes!


2 Answers

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].

like image 200
Owlvark Avatar answered Sep 30 '22 16:09

Owlvark


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:

  • You need to use to.owl.carousel
  • You need to pass three parameters: [position, speed, thirdParameter]

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'.

like image 23
Vin Avatar answered Sep 30 '22 16:09

Vin