0

第一次使用 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>
4

3 回答 3

1

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

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

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

我希望这有帮助！

于 2013-12-08T06:45:44.427 回答
0

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

于 2014-05-24T00:12:27.160 回答
0

修复了它，我们正在寻找一个响应式幻灯片，所以：

在 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;
}

我希望这对你有用！

于 2014-12-23T17:52:37.877 回答