如何使用 jquery 循环 2 连续滑块但不止一个图像？答案

【问题标题】：How to use jquery cycle 2 continuous slider but more than one image?如何使用 jquery 循环 2 连续滑块但不止一个图像？
【发布时间】：2013-05-07 09:34:24
【问题描述】：

我正在使用jquery循环2来获得连续的幻灯片效果...http://jquery.malsup.com/cycle2/demo/continuous.php

代码如下：

<div class="cycle-slideshow cycle-autoinit"
        data-cycle-fx="scrollHorz"
        data-cycle-slides="> div"
        data-cycle-speed="3000"
        data-cycle-pause-on-hover="true"
        data-cycle-timeout="1"
        data-cycle-easing="linear"
        data-cycle-carousel-visible=5>

       <div>
         <a href="@slide.Link" target="_blank">
           <img src="@Url.Content("~/content/cms/slideshow/")@slide.ImageName" alt="" /></a>
       </div> 
  <div>
         <a href="@slide.Link" target="_blank">
           <img src="@Url.Content("~/content/cms/slideshow/")@slide.ImageName" alt="" /></a>
       </div>                            
    </div>

这行得通。然而，只有一个图像在屏幕上滑动，然后出现下一个。我想要的是所有图像彼此相邻滑动，所以像 5 一样出现并旋转？

【问题讨论】：

你发现了吗？如果是这样，您可以发布解决方案吗？谢谢

标签： jquery-cycle2

【解决方案1】：

您好，我认为您必须设置 data-cycle-fx=carousel。试试这个：

<div class="cycle-slideshow cycle-autoinit"
    data-cycle-fx="carousel"
    data-cycle-slides="> div"
    data-cycle-speed="3000"
    data-cycle-pause-on-hover="true"
    data-cycle-timeout="1"
    data-cycle-easing="linear"
    data-cycle-carousel-visible=5>

...

我现在无法测试它，但我希望它可以工作。

必须包含 Cycle2 的 carousel transition plugin 才能使用轮播效果。

【讨论】：

添加了下载链接

【解决方案2】：

如果有帮助，这里是您想要的示例：http://jsfiddle.net/CersX/2/

我基本上在示例中添加了data-cycle-carousel-fluid=true data-cycle-easing="linear"。

把图片换成你的就行了。

我的代码来自http://codepen.io/colir/pen/bhcAx

【讨论】：

【解决方案3】：

这是答案 - carousel-slide-dimension on Jquery Cycle2 -fixed width/height

'carouselSlideDimension' 作为您的论点或：

data-cycle-carousel-slide-dimension=ANUMBER

$this.cycle({
 "allowWrap" : false,
 "carouselSlideDimension" : "151px",
 "carouselVisible" : 3,
 "fx" : "carousel",
 "log" : false,
 "timeout" : 0,
 "next" : "#" + id + " .next",
 "prev" : "#" + id + " .prev",
 "slideActiveClass" : "active",
 "slides" : "> .slide",
});

【讨论】：