如何使用jQuery循環2連續滑塊但不止一個圖像？

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

這裏是你想要什麼，如果有幫助的例子：http://jsfiddle.net/CersX/2/

我基本上都添加了data-cycle-carousel-fluid=truedata-cycle-easing="linear"那裏例子。

只換出你的圖像。

我根據我的代碼http://codepen.io/colir/pen/bhcAx

Answer 2

嗨我想你必須設置你的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 3

這裏的答案 - carousel-slide-dimension on Jquery Cycle2 -fixed width/height

'carouselSlideDimension' 作爲你的論點或：

數據循環輪播，slide-尺寸= 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", 
});