using div elements with jQuery Orbit Plugin 1.2.3

Question

I am trying to use an older version of Orbit, 1.2.3, and I am trying to make a carousel for a few div's. It would rotate like how it would rotate img tags. I got it to work for the images but when it comes to the divs, it just overlaps all the div elements on top of eachother

The javascript is:

function onRecommendationPageletLayout() {
$(document).ready(function() {
    jQuery('#awsmp-hero-featureSwap').show().orbit({
        animation : 'vertical-slide',
        animationSpeed : 0,
        advanceSpeed : 5500,
        pauseOnHover : true,
        directionalNav : true,
        captions : false,
        bullets : true,
        timer : false
    });
});
}

The code for the images is as follows and works correctly:

<div id="awsmp-hero-featureSwap">
<img
    src="https://images-na.ssl-images-amazon.com/images/G/01/AWSMP/en_US/images/aiscaler-dynamic-site-img-logo.jpg"
    alt="Overflow: Hidden No More" /> <img
    src="https://images-na.ssl-images-amazon.com/images/G/01/AWSMP/en_US/images/a-ten-networks-vthunder-img.jpg"
    alt="HTML Captions" /> <img
    src="https://images-na.ssl-images-amazon.com/images/G/01/AWSMP/en_US/images/vyatta-virtual-router-img-logo.jpg"
    alt="and more features" />
</div>

But when it comes to the div elements it does not apply the carousel and overlaps all the div elements :

<div id="awsmp-hero-featureSwap">
    <div>some content here</div>
    <div>more content here</div>
    <div>this is the 3rd slide</div>
</div>

it shows it like in the following image:

The CSS for the div elements is

style="z-index: 1; 
display: block; 
top: 0px;"

as you can see, it overlaps all the div elements. The javascript does its job and places the right div on top by changing the z-index. I have played around with the CSS but seems like I am missing one CSS element. All help is greatly appreciated! Thanks

Answer 1

we actually did this. You have to add a background color to your div. Otherwise your div background is transparent. Try targeting your '.orbit div' in a CSS sheet or in the head and add a background color to the div elements.

So you CSS would look like

.orbit div{background:white}