Jquery 在取消滑动幻灯片放映中禁用向后动画

我用unslider（unslider.com）设置了一个横幅幻灯片，从技术上讲，它运行正常。但是，我不希望它在最后一张幻灯片结束时将动画向后播放到第一张幻灯片。我希望它以与所有其他幻灯片转换相同的方式转到第一张幻灯片。我想不出来

下面的代码和此处的工作演示：

---

---

#惠普旗{
宽度：1024px；
}
#hp横幅左侧{
浮动：左；
宽度：680px；
高度：200px；
}
#hp横幅右ul{
宽度：324px；
浮动：左；
保证金：0；
填充：0；
}
#hp横幅右ul li{
列表样式：无；
线高：38px；
高度：38px；
背景#f9fafb；
位置：相对位置；
颜色：#8d8d69；
文本对齐：居中；
边框：实心薄型#cbcccc；
}
#hp横幅右侧ul li：悬停，
#hp横幅右ul li.active{
颜色：白色；
背景:"4882c3,；
}
#hp横幅右ul li:悬停：在，
#hp横幅右侧ul li。活动：之前{
内容：''；
边框顶部：19px实心透明；
边框底部：19px实心透明；
右边框：38px固体#4882c3；
位置：绝对位置；
右：100%；
排名：0；
}
.横幅{
位置：相对位置；
溢出：自动；
宽度：680px；
}
班纳保险公司{
保证金：0；
填充：0；
}
李先生{
列表样式：无；
}
班纳乌尔·李先生{
浮动：左；
显示：块；
最大宽度：100%；
高度：200px；
/*-webkit背景尺寸：100%100%*/
-moz背景大小：100%100%；
-o-背景尺寸：100%100%；
-ms背景尺寸：100%100%；
/*背景大小：100%100%*/
}
#图1{
背景图像：url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image1.jpg");
}
#图2{
背景图像：url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image2.jpg");
}
#图3{
背景图像：url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image3.jpg");
}
#图4{
背景图像：url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image4.jpg");
}
#图5{
背景图像：url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image5.jpg");
}

---

$（函数（）{
$（'.banner'）.unslider({
速度：500，//为每张幻灯片设置动画的速度（毫秒）
延迟：2000年，
点：是的，
完成：函数（）{
var index=$（'#hp banner.dot.active'）.index（）；
$（'#hp banner right li'）.removeClass（'active'）.eq（index）.addClass（'active'）；
}
});
});
$（文档）.ready（函数（）{
$（'#hp banner right li'）.first（）.addClass（'active'）；
});

切换到另一个幻灯片放映插件可能是最好的选择，但如果您致力于使用Unslider，有一种黑客方法可以实现您想要的

将第一张图像的副本添加到列表末尾

<ul>
    <li class="image1"></li>
    <li class="image2"></li>
    <li class="image3"></li>
    <li class="image4"></li>
    <li class="image5"></li>
    <li class="image1"></li> <!-- Repeat first list item -->
</ul>

这将临时将转换速度设置为0，以便滑块无缝切换到实际的第一个列表项

---

当我试图应用“Harangue”中的黑客攻击时，我找到了代码，我发现您可以使用选项：

infinite:true

来实现这一点。所以，不需要黑客！只是没有那么好的记录

资料来源：

- unslider.js v2.0 on line 465 contains the following code:

if(self.options.infinite) {
    //  So then we need to hide the first slide
    self.$container.css('margin-' + prop, '-100%');
}

---

非常感谢！正是我需要的。我会记住FlexSlider未来的项目。很抱歉延迟赏金。当我接受答案时，它不让我这么做，然后我就忘了。

 <script>
   $(function() {
      $('.banner').unslider({
         speed: 500, //  The speed to animate each slide (in milliseconds)
         delay: 2000,
         dots: true,
         complete: function() {
            var index = $('#hp-banner .dot.active').index();
            $('#hp-banner-right li').removeClass('active').eq(index).addClass('active');
         }
      });
   });


   $(document).ready(function() {
      $('#hp-banner-right li').first().addClass('active');
   });
</script>

<ul>
    <li class="image1"></li>
    <li class="image2"></li>
    <li class="image3"></li>
    <li class="image4"></li>
    <li class="image5"></li>
    <li class="image1"></li> <!-- Repeat first list item -->
</ul>

if (index == $("#hp-banner-right li").length)
{
  var data = slidey.data('unslider');
  data.speed = 0;
  data.move(0, function () {})
  data.speed = 500;
  $('#hp-banner-right li').removeClass ('active').eq (0).addClass ('active');
}

- unslider.js v2.0 on line 465 contains the following code:

if(self.options.infinite) {
    //  So then we need to hide the first slide
    self.$container.css('margin-' + prop, '-100%');
}