Question

我正在使用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个正在出现并在旋转时转动？

Answer 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才能使用轮播效果。

Answer 2

以下是您需要的示例：http://jsfiddle.net/CersX/2/

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

只需换掉你的图像。

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

Answer 3

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

' carouselSlideDimension '作为您的参数或：

数据周期传送带滑动维= A-号码

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

如何使用jquery循环2连续滑块但多个图像？

3 个答案: