Search code examples
jqueryhtmlcsssliderfade

jQuery cycle2 - fade/fadout content overlap issue

Please checkout JSFiddle

<div class="right-panel">
        <div class="cycle-slideshow testimonials"
        data-cycle-fx="fadeout"
         data-cycle-speed=3500
         data-cycle-timeout=1000
         data-cycle-slides="> blockquote"
        >

How to avoid content overlapping issue when slider fadeIn/Out

Solution

  • The content overlapping is happening because of the slow animation speed (data-cycle-speed). The extra reason you are seeing the overlap is because of the lack of a background of the blockquote elements. I updated your fiddle so that the animation is faster en the blockquote has a background color: http://jsfiddle.net/veritas87/qLQv5/1/

    You can set the rotation speed (how long slides are staying on screen) with the data-cycle-timeout: 

    data-cycle-speed=500
data-cycle-timeout=3000