Question

我使用unslider（unslider.com）设置横幅幻灯片，技术上表现正常。但是，我不希望它在最后一张幻灯片结束时将向后动画返回到第一张幻灯片。我希望它以与所有其他幻灯片转换行为相同的方式转到第一张幻灯片。我无法弄清楚这一点。

以下代码和工作演示：

  <div id="hp-banner">
   <div id="hp-banner-left" class=banner>
      <ul>
         <li id="image1">
            <a href="/test.php" style="width: 100px; height: 100px; border: 0; position: absolute; top: 100px; left: 100px;"></a>
            <a href="/test.php" style="width: 100px; height: 100px; border: 0; position: absolute; top: 100px; left: 400px;"></a>
         </li>
         <li id="image2"></li>
         <li id="image3"></li>
         <li id="image4"></li>
         <li id="image5"></li>
      </ul>
   </div>

   <div id="hp-banner-right">
      <ul>
         <li><a href="">banner 1</a></li>
         <li><a href="">banner 2</a></li>
         <li><a href="">banner 3</a></li>
         <li><a href="">banner 4</a></li>
         <li><a href="">banner 5</a></li>
      </ul>


   </div>

   <!-- hp banner end -->
</div>

 <style>
   #hp-banner {
      width: 1024px;
   }
   #hp-banner-left {
      float: left;
      width: 680px;
      height: 200px;
   }
   #hp-banner-right ul {
      width: 324px;
      float: left;
      margin: 0;
      padding: 0;
   }
   #hp-banner-right ul li {
      list-style: none;
      line-height: 38px;
      height: 38px;
      background: #f9fafb;
      position: relative;
      color: #8d8d69;
      text-align: center;
      border: solid thin #cbcccc;
   }
   #hp-banner-right ul li:hover,
   #hp-banner-right ul li.active {
      color: white;
      background: #4882c3;
   }
   #hp-banner-right ul li:hover:before,
   #hp-banner-right ul li.active:before {
      content: '';
      border-top: 19px solid transparent;
      border-bottom: 19px solid transparent;
      border-right: 38px solid #4882c3;
      position: absolute;
      right: 100%;
      top: 0;
   }
   .banner {
      position: relative;
      overflow: auto;
      width: 680px;
   }
   .banner ul {
      margin: 0;
      padding: 0;
   }
   .banner li {
      list-style: none;
   }
   .banner ul li {
      float: left;
      display: block;
      max-width: 100%;
      height: 200px;
      /*        -webkit-background-size: 100% 100%;*/

      -moz-background-size: 100% 100%;
      -o-background-size: 100% 100%;
      -ms-background-size: 100% 100%;
      /*        background-size: 100% 100%;*/
   }
   #image1 {
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image1.jpg");
   }
   #image2 {
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image2.jpg");
   }
   #image3 {
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image3.jpg");
   }
   #image4 {
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image4.jpg");
   }
   #image5 {
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image5.jpg");
   }
</style>

 <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>

Answer 1

最好切换到另一个幻灯片插件like FlexSlider 2，但是如果你致力于使用Unslider，那么你可以通过一种hacky方式来实现你想要的目标。

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

<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>

然后当unslider到达最后一张幻灯片（副本）时，以下代码应该在完整的回调中运行。

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');
}

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

You can see all of this together in my CodePen.

Answer 2

当我试图应用来自Harangue＆＃39;我想出了代码，我发现你可以使用选项：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%');
}

在非幻灯片幻灯片中禁用向后动画

2 个答案: