Display Nop JCarousel inside Nop Quick Tab

What would be the best way to display a JCarousel inside a tab?

I attempted to do the following in _ProductTabs.cshtml

var relatedProducts = Html.Widget("relatedProducts_jcaroussel").ToHtmlString();
if (!String.IsNullOrWhiteSpace(relatedProducts))
{
     divs.Add(new KeyValuePair<string, string>("tab-relatedProducts", relatedProducts));
     <li><a href="#tab-relatedProducts">Related Products</a></li>        
}


The above was my best guess.

The JCarousel does shows up in the tab, but the formatting (HTML,CSS) is completely messed up.


Any assistance would be greatly appreciated.


Thanks,
~Mike

Hi Mike,

Pretty good guess! What you have done is perfectly fine and the JCarousel should be shown in the tabs. Do you have any javascript errors in the browser? The styling might need some fine tuning, so that the JCarousel looks nice inside a tab. If you can share a link to your site, so that we can take a look and see if we could help.

Thanks

I do not have any javascript errors on the page.  Unfortunately, I'm still developing the site on my laptop using Visual Studios 2012 and do not have a live site link to share with you.  I know that this makes it more difficult to help, but I was curious if you have examples of a Nop JCarousel displayed inside a Nop Quick Tab.

I did observe a few things...

1) When the page loads...

I have 2 tabs (Tab1 and Tab2).  Tab1 displays by default.  Tab2 has the JCarousel in it.

When I click Tab2 the JCarousel displays, but the items are wrapped vertically and not aligned horizontal as expected.


2) If I re-size or maximize the page or if I click on the jcarousel-prev / jcarousel-next arrows the items are corrected and display as expected.