4

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>

これは機能します。ただし、1 つの画像だけが画面を横切ってスライドし、次の画像が表示されます。私が欲しいのは、すべての画像が隣り合ってスライドするので、5つが表示され、回転して回転するようになりますか?

4

3 に答える 3

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 のカルーセル トランジション プラグインを含める必要があります。

于 2013-05-16T10:44:05.433 に答える
0

これが役立つ場合に必要なものの例を次に示します: http://jsfiddle.net/CersX/2/

私は基本的data-cycle-carousel-fluid=true data-cycle-easing="linear"にそこに例を追加しました。

画像を自分のものに交換するだけです。

コードはhttp://codepen.io/colir/pen/bhcAxに基づいています

于 2013-06-17T04:32:27.267 に答える
0

これが答えです - Jquery Cycle2 の carousel-slide-dimension -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",
});
于 2014-06-17T19:39:11.920 に答える