jQuery .trigger() handler.

Thanks for checking in! Please my comment above to see how I setup the owl. Thanks!

Hi Boris,

I still have to say that I don't think there is anything wrong with the original code that you have shown, I think the problem lies elsewhere and it could be that you appear to be using version 2 like Aaron mentioned.

V2 is a beta version meant only for testing according to the site. You should not be using this in production. When I try to use it locally I get a javascript error from the carousel file in both firefox and chrome and I can't get the next and previous buttons working. There are probably still bugs in this version and I would recommend you switch back to 1.3.2 if that is in fact what you did. You will have to take out the options though that didn't exist in the older version.

I set up a codepen demo using your code and the 1.3.2 version of owl loaded via cdn. I copied over your code and did not make any changes. The only exception was that I had to guess what the carousel items were but that shouldn't matter. I put "item" div's with images inside.

The autoplay is not working and I don't know why but the "previous" and "next" buttons are working. This is why I don't think there is anything wrong with the code that you have shown us, unless I didn't duplicate something correctly.

I even created the other 2 carousels just in case multiple carousels was causing some kind of conflict.

http://codepen.io/anon/pen/yBbps?editors=101

I take some of that back. I can get the "previous" and "next" buttons working in v2. The problem was that the event names have changed. Now they are next.owl.carousel and prev.owl.carousel. The old ones were owl.next and prev.next

You can see the new event names about 3/4 down the page here: http://www.owlcarousel.owlgraphic.com/docs/api-events.html

If I change the event names in your code then it works with v2. Also, I guess the autoplay wasn't working because I hadn't included the autoplay js file.

I still would recommend not using it unless you understand that you're taking a risk. I would at least test it in all the browsers you care to support and also check out the reported v2 issues to see if any will affect you. https://github.com/OwlFonk/OwlCarousel2/issues

So my revised guess on the problem is that you're using v2 with the old event names.

Thanks you for your answer, I tried it and it doesn't work... I did setup the instance, yes. Here's my total code:

//call Owl-Carousel
$(document).ready(function(){

    $("#owl-properties").owlCarousel({
        nav: false,
        pagination: true,
        loop: true,
        dots: false,
        autoplay: true,
        autoplayTimeout:2000,
        autoplayHoverPause:true,
        margin:10,
        responsiveClass:true,
        responsive:{
            0:  {
                items:2
            },
            450:{
                items:3
            },
            767:{
                items:4
            },
            991:{
                items:5
            },
            1199:{
                items:5
            }
        }
    });

    //Custom Navigation Events
    $(".customNavigation .btn.btn-primary.next").click(function(){
        $("#owl-properties").trigger('owl.next');
    })
    $(".customNavigation .btn.btn-primary.prev").click(function(){
        $("#owl-properties").trigger('owl.prev');
    })

    $("#owl-awf1-properties,#owl-awf2-properties").owlCarousel({
        pagination: true,
        loop: true,
        dots: false,
        autoplay: true,
        autoplayTimeout:2000,
        autoplayHoverPause:true,
        margin:10,
        responsiveClass:true,
        responsive:{
            0:  {
                items:2
            },
            450:{
                items:3
            },
            767:{
                items:4
            },
            991:{
                items:5
            },
            1199:{
                items:5
            }
        }
    });

});

Does that help you? Thanks for helping!

boris kamp - to use owl.prev and owl.next, you need a variable that references an instance of the owl object. I did some checking and built a quick mockup and it looks like this will work:

var owl = $('#owl-properties').data('owlCarousel');

try adding that just before your custom navigation events and let me know if it works.

Hi Aaron! Thank you for putting effort in this. Unfortunately id did not work, I hope I did the right thing. I have this in my code now:

$(document).ready(function(){

    $("#owl-properties").owlCarousel({
        nav: false,
        pagination: true,
        loop: true,
        dots: false,
        autoplay: true,
        autoplayTimeout:2000,
        autoplayHoverPause:true,
        margin:10,
        responsiveClass:true,
        responsive:{
            0:  {
                items:2
            },
            450:{
                items:3
            },
            767:{
                items:4
            },
            991:{
                items:5
            },
            1199:{
                items:5
            }
        }
    });

    //Custom Navigation Events
    var owl = $('#owl-properties').data('owlCarousel');

    $(".customNavigation .btn.btn-primary.next").click(function(){
        owl.trigger('owl.next');
    })
    $(".customNavigation .btn.btn-primary.prev").click(function(){
        owl.trigger('owl.prev');
    })

});

and this piece of html:

        <div class="customNavigation">
          <a class="btn btn-primary prev">Previous</a>
          <a class="btn btn-primary next">Next</a>
        </div>

Do you notice anything I did wrong?

Thanks!

boris kamp - Do you happen to know which version of Owl Carousel you are running? If you aren't sure, you should be able to find it by opening the owl.carousel.js file you are using. I was assuming you are using version 1, but It looks like you are using configuration options from version 2. Here is the code I am using to get version 1 to work:

$(document).ready(function(){

  $("#owl-properties").owlCarousel({
    nav: false,
    pagination: true,
    loop: true,
    dots: false,
    autoplay: true,
    autoplayTimeout:2000,
    autoplayHoverPause:true,
    margin:10,
    responsiveClass:true,
    responsive:{
      0:  {
        items:2
      },
      450:{
        items:3
      },
      767:{
        items:4
      },
      991:{
        items:5
      },
      1199:{
        items:5
      }
    }
  });

  var owl = $('#owl-properties').data('owlCarousel');

  //Custom Navigation Events
  $(".customNavigation .btn.btn-primary.next").click(function(event){
    event.preventDefault();
    owl.next();
  });
  $(".customNavigation .btn.btn-primary.prev").click(function(event){
    event.preventDefault();
    owl.prev();
  });

});

Obviously, since I am using version 1, the configuration options don't work.

If it turns out you are using version 2, this code probably won't work to trigger the prev and next events. If it turns out you are using version 1, this code should work for executing the prev() and next() methods, but you will probably need to redo your configuration options. These are the version 1 options I was able to find: http://owlgraphic.com/owlcarousel/#customizing

Let me know what you find out.

Hi Aaron,

I don't think that there is an owl object in the custom demo that Boris linked to, I think the .trigger method is the jQuery trigger method.

In the example demo they're caching the jQuery object in the owl variable. var owl = $("#owl-demo");

So later when you do this, owl.trigger('owl.next'); you're calling the trigger method on a jquery object.

I suppose they should have followed the convention of putting a $ in front of the owl variable to indicate it's storing a jQuery object.

I think the only difference between Boris' code and the demo was that Boris didn't cache the selection but rather reselected every time and the possibility of incorrect event names.