2

I have this img slideshow that changes when I click. I would like no effects when the image change, like it used to be in the old jquery-cycle, but instead I get a strange effect of 2 images overlapping each others until the second one finally appear and the first then disappear.

        <div class="imgCyclerBody">
            <div><a href="#" class="prev"><img class="sortArrow" src="~/Content/imgs/arrow-left.png" alt="left"/></a></div>
            <div id="slideshow" class="cycle-slideshow" data-cycle-fx="none" data-cycle-hide-non-active="true" data-cycle-prev=".prev" data-cycle-next=".next">
                <img alt="Item" src="~/Content/imgs/image1.png" width="30" height="30" />
                <img alt="Item" src="~/Content/imgs/image2.png" width="30" height="30" />
                <img alt="Item" src="~/Content/imgs/image3.png" width="30" height="30" />
                <img alt="Item" src="~/Content/imgs/image4.png" width="30" height="30" />
                <img alt="Item" src="~/Content/imgs/Pixels.png" width="30" height="30" />
            </div>
            <div><a href="#" class="next"><img class="sortArrow" src="~/Content/imgs/arrow-right.png" alt="right"/></a></div>
        </div>

Does anybody knows how to avoid this problem? I moved from the old jquery-cycle to the new one becaue I had a problem with my DIVs format when I used fx: 'none'. Thanks

Maurizio In denmark
  • 4,226
  • 2
  • 30
  • 64

1 Answers1

1

Have you tried using the easing plugin?

This doesn't appear to be having an issue on my fiddle.

<div class="cycle-slideshow" 
  data-cycle-slides="li" 
  data-cycle-fx='none' 
  data-cycle-speed='700' 
  data-cycle-timeout='7000' 
  data-cycle-pause-on-hover="true" 
  data-cycle-prev=".prev" 
  data-cycle-next=".next"     
  data-cycle-easing="easeOutBack"
>
Charles Butler
  • 573
  • 3
  • 15