I have incorporated three different image galleries using the SlidesJS plugin and placed them within tabs of Twitter Bootstrap.
To see a demo, click here.
While the first gallery is displaying correctly within its tab, the images for the second and third galleries are not showing up.
I suspect this issue may be related to the tabs' content being hidden and causing conflicts with the gallery's CSS styles.
Do you have any suggestions for how to resolve this?
Answer:
After considering the advice provided below, I implemented the following solution:
$(document).ready(function(){
$('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
$("#gallery-tab a").each(function( index ) {
$(this).on('shown', function(){
$('#slides' + index).slidesjs({ width: 918, height: 200, navigation: false });
});
});
});