0

Working with jquery cycle2 for the first time. Works great when my slides are images, but when my slides are anchors it doesn't use the scrollHorz transition effect that I have specified. Instead the transition grows out of the top right of the anchor.

In the code below, the first slideshow works as expected, in the second slideshow, the transition effect is some unknown type (not scrollHorz).

<div class="page">

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-timeout=0
        >

        <!-- empty element for caption -->
        <div class="cycle-caption"></div>

        <!-- prev/next links -->
        <div class="cycle-prev"></div>
        <div class="cycle-next"></div>
        <img src="../Images/top-mod1.png" />
        <img src="../Images/top-mod2.png" />
        <img src="../Images/top-mod3.png" />
        <img src="../Images/top-mod4.png" />
    </div>

    <div class="cycle-slideshow" 
        data-cycle-slides="a"
        data-cycle-fx=scrollHorz
        data-cycle-timeout=0
        >

        <!-- empty element for caption -->
        <div class="cycle-caption"></div>

        <!-- prev/next links -->
        <div class="cycle-prev"></div>
        <div class="cycle-next"></div>
        <a href="http://www.google.com"><img src="../Images/top-mod1.png" /></a>
        <a href="http://www.yahoo.com"><img src="../Images/top-mod2.png" /></a>
        <a href="http://www.facebook.com"><img src="../Images/top-mod3.png" /></a>
        <a href="http://www.weather.com"><img src="../Images/top-mod4.png" /></a>
    </div>

</div>
g2000t
  • 1
  • 1
  • I think it's a bug in cycle2. It has a problem if there are images inside of of the specified slide type (anchors in this case). If the anchors contain non-image content, then the transitions behave as expected. – g2000t Nov 08 '13 at 22:20

3 Answers3

1

I was having the same issue and I was able to fix it with CSS by specifying the width and height of the anchor tags like this:

.cycle-slideshow a { 
    display: block; 
    width: 635px; 
    height: 345px;
}

Be sure to change the width and height according to the dimensions of your image.

I hope this helps!

Vimo Designs
  • 21
  • 3
0

I was running into the same issue using divs, and the fix was to use CSS to set the width of the slide divs to 100%, which keeps you from having to set specific sizes.

MindPalette
  • 16
  • 1
0

Fixed it, we're looking for a responsive slide show so:

set the width and height of the images in the html for the slides as follows:

<a href="YOUR LINK ADDRESS">
    <img src="images/portfolio_1.jpg" width="100%" height="auto" >
</a>

The CSS worked with the following:

.cycle-slideshow a{
width: 100%;
height: auto;
}

I hope this works for you!

Colin Eatherton
  • 26
  • 3