2

カルーセルの「前」および「次」リンクに説明を割り当てるスクリプトを作成しようとしています。説明は、現在のスライドの数値に基づいてカルーセル アイテム ID 属性から読み取る必要があります (カルーセル API を介してアクセスできます - JS コードの最初の行を参照してください - 1 から始まるカルーセル アイテムの数値を返します)

HTML:

<div id="carousel-wrapper" class="content-promo carousel-wrapper>
  <div class='wrapper'>

    <div id='features' class=' ccm-block-styles'>
      <div id='slide-1' class='carousel-slide'>
         <!-- SOME CONTENT  -->
      </div>
    </div>

    <div id='lifestyle' class=' ccm-block-styles'>
      <div id='slide-2' class='carousel-slide'>
         <!-- SOME CONTENT  -->
      </div>
    </div>

    <div id='food-&-drink' class=' ccm-block-styles'>
      <div id='slide-3' class='carousel-slide'>
         <!-- SOME CONTENT  -->
      </div>
    </div>

  </div> <!-- End of .wrapper -->
</div> <!-- End of #carousel-wrapper -->

JS:

currentslide = $( ".carousel-wrapper" ).rcarousel( "getCurrentPage" );
prevslide = currentslide - 2; // as eq() counts from 0
prevslideidtext = $(".carousel-slide").eq( prevslide ).parent().attr( "id" );
nextslide = currentslide;
nextslideidtext = $(".carousel-slide").eq( nextslide ).parent().attr( "id" );

残念ながらprevslideidtext、前のスライドの親の ID を返す代わりに、DIV は現在のスライドの親の ID を返しnextslideidtextますundefined。

結果の例 (最初のスライドが現在のスライドの場合):

currentslide = 1
prevslide = -1
nextslide = 1
prevslideidtext = features
nextslideidtext = undefined

クラスには 6 つの DIV がありますcarousel-slide(上記の HTML コードには 3 つだけが示されています) が、上記の JS スクリプトは 1 つしかなかったように動作します。

私が間違っていることは何ですか？

私はそれを使用することを主張しませんeq();.私が必要とする効果を達成するための明確で簡単な方法であるように思えただけです.

(eq() に渡されたインデックスが範囲外の場合、eq() は新しい空のアイテムを作成することを認識しています。それを整理するつもりでした - 最後のスライド - 後で)

ありがとう

4

2 に答える 2

0

私の問題に対して見つけた回避策：

// 1. Read and save old carousel navigation text (like "Prev" and "Next")
carouselprevoldtext = $('#ui-carousel-prev').children(".carousel-control-text").html();
carouselnextoldtext = $('#ui-carousel-next').children(".carousel-control-text").html();
// 2. How many slides?
maxslidenumber = $(".carousel-slide").length;
// 3. Create an array with all slides' IDs (in this particular case I use parent() as ID is assigned through CMS by user not hardcoded - and extra DIV is added by CMS)
slideidarray = {};
$(".carousel-slide").each(
    function(index){
    slideidarray[index] = $ ( this ).parent().attr('id');
}                      
);
// 4. Run the carousel
$( ".carousel-wrapper" ).rcarousel({ OPTIONS HERE });
// 5. Find current slide
currentslide = $( ".carousel-wrapper" ).rcarousel( "getCurrentPage" ); // starts from 1 not from 0
// 6. Find previous and next slides ID texts
// A. For first slide - previous slide is the last one
if (currentslide == 1) {
    prevslideidtext = slideidarray[maxslidenumber - 1];
    nextslideidtext = slideidarray[1];
}
else {
    prevslideidtext = slideidarray[currentslide - 2]; // as arrays count from 0
    nextslideidtext = slideidarray[currentslide];
    // B. For last slide - next slide is the first one
    if (currentslide == maxslidenumber) {
    nextslideidtext = slideidarray[0];
    }
}
// 7. Create new carousel navigation text
carouselprevupdhtml = "<span class='carousel-control-text'>" + carouselprevoldtext + ": </span><span class='carousel-control-title'>" + prevslideidtext + '</span>';
carouselnextupdhtml = "<span class='carousel-control-text'>" + carouselnextoldtext + ": </span><span class='carousel-control-title'>" + nextslideidtext + '</span>';
// 8. Assign it to carousel navigation
$('#ui-carousel-prev').html( carouselprevupdhtml );
$('#ui-carousel-next').html( carouselnextupdhtml );

もちろん、スライドを変更するたびに手順 5 ～ 8 を繰り返す必要があります。

于 2013-03-29T23:00:26.980 に答える
0

こんにちは、まず私があなたをより良く助けるために、次のことを行うことができますか：

1.) サンプル コードを JSFiddle または CodePen に配置します。次に、そのリンクをここに投稿します。 http://jsfiddle.net/ http://codepen.io/

上記のクラス名または ID 名を変更することをお勧めします。ID とクラスの両方に同じ名前を付けることはお勧めできません。

次のものがあります。

<div id="carousel-wrapper" class="content-promo carousel-wrapper>

更新: #carousel-wrapper 要素の class 属性からの引用を閉じる必要があるようです。

于 2013-03-17T23:01:50.713 に答える