How to hide inactive slides on jquery cycle

0
votes

I am using jquery cycle to cycle through a large number of customer reviews, with a numbered pager and 6 items per page. My code is as follows:

<script type="text/javascript">
    $(function() {              
        $('.reviews')
            .before('<div id="banner-nav">')
            .cycle({
                fx:'fadeout', 
                timeout: 5000,
                pager: '#banner-nav'
        });
    });
</script>

I need the reviews to be transparent (text only) as there is a background image that needs to be visible. The problem is that since jquery cycle does not hide inactive slides, I get an effect like the following:

enter image description here

Please see http://jsfiddle.net/7jok549x/ for an example

Can anyone suggest a fix for this?

2
jquerycssjquery-cycle
Can you make a jsfiddle? - mellis481
Please share your site link. Then we could help. @Marc - Ahmad Sharif
jsfiddle.net/7jok549x - Marc
If you save the review-div-IDs in a array for the javascript and loop through them? If x is selected, set the visiblity:visible; else visibility:collapsed; - JakobMiller
See my answer, I have solved it. - Sleek Geek

2 Answers

1
votes

Remove the fx:'fadeout', line from the options.

This options shows all and just hides the active one.

The default (when you remove it) is to fade in the active one.

Demo at http://jsfiddle.net/gaby/7jok549x/3/

1
votes

It starts with your CSS. Adding position property value of absolute and also a background-color to .review Will be a good start.

.review {
position: absolute; /* that stacks them on top of each other */
background-color: white; /* You need a background so you don't see the ones behind */
}

See working example here