Question

第一次使用jquery cycle2。当我的幻灯片是图像时效果很好，但是当我的幻灯片是锚点时，它不会使用我指定的scrollHorz过渡效果。相反，过渡从锚的右上方开始。

在下面的代码中，第一张幻灯片按预期工作，在第二张幻灯片中，过渡效果是某种未知类型（不是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>

Answer 1

我遇到了同样的问题，我可以通过指定锚标签的宽度和高度来修复它，如下所示：

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

请务必根据图像尺寸更改宽度和高度。

我希望这有帮助！

Answer 2

我使用div遇到了同样的问题，修复方法是使用CSS将幻灯片div的宽度设置为100％，这样就不必设置特定的大小。

Answer 3

修正了它，我们正在寻找响应式幻灯片，以便：

在幻灯片的html中设置图像的宽度和高度，如下所示：

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

CSS使用以下内容：

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

我希望这适合你！

jQuery cycle2使用锚定幻灯片的错误转换

3 个答案: