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" );

不幸的是，当isprevslideidtext时，DIV 不是返回上一张幻灯片父级的 ID，而是返回当前幻灯片父级的 ID 。nextslideidtextundefined

结果示例（当第一张幻灯片是当前幻灯片时）：

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

有 6 个带carousel-slide类的 DIV（上面的 HTML 代码中只显示了 3 个），但上面的 JS 脚本的行为与只有一个一样。

我做错了什么？

我不坚持使用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 元素的类属性中的引用。

于 2013-03-17T23:01:50.713 回答