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
Hannah Jones
Courses Plus Student 60 Pointstwo carousels
Hello,
I hope you can help me.
I am using this carousel http://tympanus.net/codrops/2011/08/16/circular-content-carousel/ to go on this website www.setterstester.com.
I want to use it again in "our clients" above the "our people". However the bottom one (our people) doesn't work when i put in the html in the index and the top does(our clients).
Does anyone have an idea what to do. I tried doubling the js files and adding '1' to their name but that just changed the fonts and layout of the whole site.
I feel like it should be really simple.
Thanks for any help.
4 Answers
Matt Campbell
9,767 PointsDuplicate the codes that are relevant between each, changing class names to match the two different carousels.
To help you, now you've got the first one working, delete all the code and store it somewhere safe. Now make the second one work and then copy back in your original code.
I don't know how that carousel works but the theory I'm working on will work.
I've just finished making a second carousel in a sidebar work. It's lengthy but, here's the code to give you an example:
/////////////////// WOOCOMMERCE ///////////////////
/////////////////// WOOCOMMERCE SHOP PAGE ///////////////////
/////////////////// SIDEBAR SLIDER ///////////////////
/////////////////// BREAK LIST TO 2 ROWS ///////////////////
var count_bestsellers = Math.ceil($('li.widget_best_sellers li').size()/2+1);
$("li.widget_best_sellers ul.product_list_widget li:nth-child(" + count_bestsellers + "n)").css({'clear':'left'})
var count_onsale = Math.ceil($('li.widget_onsale li').size()/2+1);
$("li.widget_onsale ul.product_list_widget li:nth-child(" + count_onsale + "n)").css({'clear':'left'})
/////////////////// ADD COVER ///////////////////
$('ul.product_list_widget').wrap('<div class="featured-products-cover"></div>')
var cover_width = $('ul.product_list_widget li').outerWidth()*count_bestsellers;
$('featured-products-cover, ul.product_list_widget').css({'width':cover_width + 'px'})
$('#best_sellers-3').find('.sidebar-title').each(function(){
$('<div>').attr({class:'sidebar-right-arrow-bestsellers'}).insertAfter(this);
$('<div>').attr({class:'sidebar-left-arrow-bestsellers'}).insertAfter(this);
})
$('#onsale-2').find('.sidebar-title').each(function(){
$('<div>').attr({class:'sidebar-right-arrow-onsale'}).insertAfter(this);
$('<div>').attr({class:'sidebar-left-arrow-onsale'}).insertAfter(this);
})
/////////////////// HORIZONTAL IMAGE & SLIDE VIEWPORT SCALING ///////////////////
var bestseller_slidewidth = '260',
bestseller_slidecount = $('li.widget_best_sellers li').size()/2,
bestseller_slideview = 260,
bestseller_dynamicwidth = (bestseller_slidecount*bestseller_slidewidth),
bestseller_rowstopper = (bestseller_slideview-bestseller_dynamicwidth)+120;
var onsale_slidewidth = '260',
onsale_slidecount = $('li.widget_onsale li').size()/2,
onsale_slideview = 260,
onsale_dynamicwidth = (onsale_slidecount*onsale_slidewidth),
onsale_rowstopper = (onsale_slideview-onsale_dynamicwidth)+120;
console.log('Number of bestseller items equals:' + count_bestsellers);
console.log('Number of onsale items equals:' + count_onsale);
console.log('Cover equals:' + cover_width);
console.log('Slide width equals:' + bestseller_slidewidth);
console.log('Slide count equals:' + bestseller_slidecount);
console.log('Slide view equals:' + bestseller_slideview);
console.log('Dynamic width equals:' + bestseller_dynamicwidth);
console.log('Row stopper equals:' + bestseller_rowstopper);
/////////////////// LEFT & RIGHT SLIDING ACTION ///////////////////
$('.sidebar-left-arrow-bestsellers').click(function(){
if($('li.widget_best_sellers ul.product_list_widget').position().left < 0 && !$('li.widget_best_sellers ul.product_list_widget').is(":animated")){
$('li.widget_best_sellers ul.product_list_widget').animate({left:"+=" + bestseller_slidewidth + "px"},500,"linear");
}else{
return false;
}
})//Slide Left closer.
$('.sidebar-right-arrow-bestsellers').click(function(){
if($('li.widget_best_sellers ul.product_list_widget').position().left > bestseller_rowstopper && !$('li.widget_best_sellers ul.product_list_widget').is(":animated")){
$('li.widget_best_sellers ul.product_list_widget').animate({left:"-=" + bestseller_slidewidth + "px"},500,"linear");
}else{
return false;
}
})//Slide Right closer.
$('.sidebar-left-arrow-onsale').click(function(){
if($('li.widget_onsale ul.product_list_widget').position().left < 0 && !$('li.widget_onsale ul.product_list_widget').is(":animated")){
$('li.widget_onsale ul.product_list_widget').animate({left:"+=" + onsale_slidewidth + "px"},500,"linear");
}else{
return false;
}
})//Slide Left closer.
$('.sidebar-right-arrow-onsale').click(function(){
if($('li.widget_onsale ul.product_list_widget').position().left > onsale_rowstopper && !$('li.widget_onsale ul.product_list_widget').is(":animated")){
$('li.widget_onsale ul.product_list_widget').animate({left:"-=" + onsale_slidewidth + "px"},500,"linear");
}else{
return false;
}
})//Slide Right closer.
Ignore the console.logs, they're just there for me to see if the correct measurements are being executed. This is worked from my totally responsive, what I call, gucciflix, slider. I won't bore you with the details on that but as you can see, I've had to duplicate the majority of the code, changing class names as I go so that each is independent of the other. There's some areas I can get away with leaving as "global" workings.
Hope that helps.
EDIT: Just seen how long that code looks when put on the forum. Sorry about that...will put it in a pen next time.
Diego Chavez
4,289 PointsYou should use the same structure with less elements obviously, just need to add a new line of jQuery calling the id of the container with the function "contentcarousel();"
Example: <script type="text/javascript"> $('#ca-container').contentcarousel(); $('#ca-container2').contentcarousel(); </script>
Diego Chavez
4,289 PointsYou should use the same structure with less elements obviously, just need to add a new line of jQuery calling the id of the container with the function "contentcarousel();"
Example: <script type="text/javascript"> $('#ca-container').contentcarousel(); $('#ca-container2').contentcarousel(); </script>
Hannah Jones
Courses Plus Student 60 PointsThank you both such a relief to get it working. I used yours Diego.