9

我现在正在建立我的投资组合网站，并在案例研究页面上有一个 Unslider.com 画廊。我希望用户能够单击我自己创建的下一个或上一个按钮，并将类名命名为 .next 和 .prev。这是我的 JQuery 代码。

jQuery(document).ready(function($) {

    var slider = $('.gallery').unslider({
        autoplay : true,
        arrows : false,
        nav : false,
        animation : 'fade',
    });

    slider.on('unslider.ready', function() {
        $(".prev").click(function() {
            unslider('animate:prev');
        });
    });

    slider.on('unslider.ready', function() {
        $(".next").click(function() {
            unslider('animate:next');
        });
    });

});

我知道 Unslider 带有下一个和上一个按钮，但我需要自己这样做才能达到预期的效果。任何有关为什么代码不起作用的建议将不胜感激。我知道 JQuery 单击链接到正确的 html 元素，因为我尝试在单击元素时向函数添加警报并且它正确显示了警报。

谢谢，杰米

4

4 回答 4

7

以前没用过unslider，但我认为

unslider('animate:next');

和

unslider('animate:prev');

需要是

slider.unslider('next');

和

slider.unslider('prev');

注意：您需要在您创建的滑块变量上引用 unslider 方法

于 2016-07-05T15:23:56.783 回答
1

在您的点击功能中，您需要说：

$('.gallery').unslider('next');

这是因为你需要告诉Unslider你想控制什么滑块，然后是调用的方法( next, not animate:next)。

于 2016-07-07T09:00:16.710 回答
0

您可以设置arrows为true（或arrows : false,从您的代码中删除，因为默认为true）...

您会看到Next和Prev链接，这些更改幻灯片，只需css按照您喜欢的方式设置这些样式:-)

jQuery(document).ready(function($) {

    var slider = $('.gallery').unslider({
        autoplay : true,
        nav : false,
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" />

<div class="gallery">
  <ul>
    <li>
      <img src="http://unslider.com/img/cat1.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat2.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat3.jpg" alt="Cats!">
    </li>
  </ul>
</div>

您的初始化代码将如下所示...（已删除arrows : false,，默认情况下为 true ;-)）

var slider = $('.gallery').unslider({
    autoplay : true,
    nav : false,
    animation : 'fade',
});
于 2016-07-04T09:58:15.313 回答
0

新的答案

我知道 Unslider 带有下一个和上一个按钮，但我需要自己这样做才能达到预期的效果。

好的，现在您可能有一些带有图标和自定义文本的漂亮箭头，在这种情况下，正如@Alex Howes 所说，您可能想要合并自定义功能。

现在，除了使用

slider.unslider('next');

和

slider.unslider('prev');

它不起作用，因为对我来说，unslider.ready事件似乎没有触发，无论如何我们都不需要使用它，只需获取外部功能slider.on('unslider.ready', function() {，});它就像一个魅力:)

你的代码看起来像这样......

jQuery(document).ready(function($) {

  var slider = $('.gallery').unslider({
    autoplay: true,
    nav: false,
    arrows: false,
  });
  $(".prev").click(function() {
    slider.unslider('prev');
  });
  $(".next").click(function() {
    slider.unslider('next');
  });

});
.gallery {
  position: relative;
}
.next,
.prev {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 5px;
  font: 25px sans-serif;
  color: #fff;
  transition: opacity 500ms;
  cursor: pointer;
  text-shadow: 0 0 2px #000;
}
.gallery:hover .next,
.gallery:hover .prev {
  opacity: 1;
}
.next {
  left: auto;
  right: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" />

<div class="gallery">
  <ul>
    <li>
      <img src="http://unslider.com/img/cat1.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat2.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat3.jpg" alt="Cats!">
    </li>
  </ul>
  <div class='prev'><i class="fa fa-chevron-left" aria-hidden="true"></i> Previous slide</div>
  <div class='next'>Next slide <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </div>

</div>

希望有帮助:)

于 2016-07-08T04:48:04.707 回答