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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Boris Kamp](https://uploads.teamtreehouse.com/production/profile-photos/450722/micro_IMG_1024.jpg)
Boris Kamp
16,660 PointsOwl 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](https://uploads.teamtreehouse.com/production/profile-photos/1846442/micro_mike-torosian.jpg)
mikes02
Courses Plus Student 16,968 PointsRather 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
16,660 PointsBoris Kamp
16,660 PointsThanks! 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 (-: