Comments 2andrew howard started the conversationSeptember 7, 2016 at 6:08pmI would like to use two separate carousels in one portfolio item page. The second carousel does not function. I assume I need to give it a new id to differentiate it from the first item, do you have any guidance on doing this?Cheers,Andrew 1,974Support repliedSeptember 8, 2016 at 10:48amHi Andrew,yes, that's correctthere is a relatively simple solution involving moving some code around.For the second carousel, don't use the shortcode, use its html output (if you go Inspect page -> View Page Source)For example<div class="centerd-carousel-container"><div id="centerd-carousel"><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_exchangeGames_emailMB_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_arcade_emailMB_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_bingo_emailMainBanner_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_casino_emailMB_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_poker_emailMB_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div></div></div>assign different class names centerd-carousel-container and centerd-carouseland then open /js/scripts.js (path relative to theme's root folder) and replicate this bitif( $('.centerd-carousel-container').length > 0 ){ $("#centerd-carousel").owlCarousel({ loop:true, margin:50, dots:true, nav:true, navText: [ '<div class="arrow-left"></div>' + '<div class="arrow-left-line"></div>', '<div class="arrow-right"></div>' + '<div class="arrow-right-line"></div>' ], center: true, dotsEach: 1, responsive:{ 0:{ items:1 }, 600:{ items:1 }, 960:{ items:2 }, 1600:{ items:2 } } }); }in function Carousel () with the new class names.ThanksThank you. Clapat Support https://www.clapat.com/ Review Envato Item Support Policy 2andrew howard repliedSeptember 8, 2016 at 1:12pmThank you, works perfectly! Sign in to reply ...
I would like to use two separate carousels in one portfolio item page. The second carousel does not function. I assume I need to give it a new id to differentiate it from the first item, do you have any guidance on doing this?
Cheers,
Andrew
Hi Andrew,
yes, that's correct
there is a relatively simple solution involving moving some code around.
For the second carousel, don't use the shortcode, use its html output (if you go Inspect page -> View Page Source)
For example
<div class="centerd-carousel-container"><div id="centerd-carousel"><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_exchangeGames_emailMB_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_arcade_emailMB_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_bingo_emailMainBanner_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_casino_emailMB_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div><div class="centerd-carousel-item"><a class="animation-link" href="" target="_blank"><img alt="image" src="http://voxel-pop.com/wp-content/uploads/2016/09/projectName_poker_emailMB_600x248_language.jpg"/><div class="carousel-caption "><span class="item-cat"></span><span class="item-title"></span></div></a></div></div></div>
assign different class names centerd-carousel-container and centerd-carousel
and then open /js/scripts.js (path relative to theme's root folder) and replicate this bit
if( $('.centerd-carousel-container').length > 0 ){
$("#centerd-carousel").owlCarousel({
loop:true,
margin:50,
dots:true,
nav:true,
navText: [
'<div class="arrow-left"></div>' + '<div class="arrow-left-line"></div>',
'<div class="arrow-right"></div>' + '<div class="arrow-right-line"></div>'
],
center: true,
dotsEach: 1,
responsive:{
0:{
items:1
},
600:{
items:1
},
960:{
items:2
},
1600:{
items:2
}
}
});
}
in function Carousel () with the new class names.
Thanks
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Thank you, works perfectly!