CODEWITHSUNDEEP
jqueryjquery-cycle2
g2000t
g2000t

Reputation: 1

jQuery cycle2 using incorrect transition for anchor slides

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>

Upvotes: 0

Views: 1355

Answers (3)

Colin Eatherton
Colin Eatherton

Reputation: 26

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!

Upvotes: 0

MindPalette
MindPalette

Reputation: 16

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.

Upvotes: 0

Vimo Designs
Vimo Designs

Reputation: 21

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!

Upvotes: 1

Related Questions