Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Boris Kamp
Boris Kamp
16,660 Points
Posted by Boris Kamp
Boris Kamp
16,660 Points

Owl carousel 'trigger' question

Hi guys! Im using a loop in my archive page to create multiple carousels on the same page: https://www.dropbox.com/s/mhf55l8oydl2pmc/Screenshot%202014-12-16%2017.06.44.png?dl=0

Because each carousel must have it's unique ID as far as I know I use this code in my loop to put the post's ID in the div's ID: <div id="owl-<?php echo $post->ID; ?>" Next I activate the carousels with javascript like this:

var projecten = $("#owl-68,#owl-69,#owl-70,#owl-71,#owl-72,#owl-73");

    projecten.owlCarousel({
        pagination: false,
        loop: true,
        autoPlay : false,
        stopOnHover : true,
        items : 1,
        itemsCustom : false,
        itemsDesktop : [1199,1],
        itemsDesktopSmall : [980,1],
        itemsTablet: [700,1],
        itemsTabletSmall: false,
        itemsMobile : [479,1],
    });

I use this:

//Custom nav functions 
    $(".owl-container .glyphicon-chevron-left").click(function(){
        projecten.trigger('owl.prev');
    });
    $(".owl-container .glyphicon-chevron-right").click(function(){
        projecten.trigger('owl.next');
    });

to create custom navigation for the owl carousel (see here: http://owlgraphic.com/owlcarousel/demos/custom.html), but because the

Now when I press the custom navigation (see screenshot) all the carousels on the archive page go to the next slide, and not just the one I press. I think I have to work with the 'this' selector but am not sure on how to implement it here, who can help me with this?

Thanks!

1 Answer

mikes02
mikes02
Courses Plus Student 16,968 Points

Rather than using individual IDs I think it would be cleaner to simply look for a class on the carousel. For example:

var projecten = $(".owl-carousel");

Then you could use jQuery's .each to loop over each carousel and by establishing your $this variable you can apply your settings to each carousel and then also trigger navigation only for that specific carousel as well by using $this.parent().

projecten.each(function() {

  var $this = $(this);

  $this.owlCarousel({
    pagination: false,
    loop: true,
    autoPlay : false,
    stopOnHover : true,
    items : 1,
    itemsCustom : false,
    itemsDesktop : [1199,1],
    itemsDesktopSmall : [980,1],
    itemsTablet: [700,1],
    itemsTabletSmall: false,
    itemsMobile : [479,1],
  )};

  $this.parent().find(".owl-container .glyphicon-chevron-left").click(function() {
    $this.trigger('owl.prev');
  });

  $this.parent().find(".owl-container .glyphicon-chevron-right").click(function() {
    $this.trigger('owl.next');
  });
});

I don't have all of your code so I can't test this on my end, but I did some research on that particular carousel and this seems to be the best way to tackle multiple instances on one page.

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Thanks! that worked almost flawlessly! There was one typo (the closing parentheses below itemsMobile : [479,1],) and I had to remove .owl-container from the trigger functions in order for it to find the glyphicons.

Thank you again! you made my day (-: