Question

我已经制作了一个缩略图轮播，一次只显示4个项目。这是代码。 HTML：

  <div class="grid__item medium-up--one-fifth thumbnails-carousel">
    <p id="prev" class="gallery-arrows"><i class="fas fa-angle-up"></i></p>
<ul class="small--hide product-images clearfix carousel slide" data-ride="carousel" data-interval="false">
{% for image in product.images %}
  <li class="item">
      <img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail>
  </li>
{% endfor %}
</ul>
<p id="next" class="gallery-arrows"><i class="fas fa-angle-down"></i></p>
</div>

JS一次只显示4个li：

$(document).ready(function () {
    var $lis = $(".thumbnails-carousel li").hide();
    $lis.slice(0, 4).show();
    var size_li = $lis.length;
    var x = 4,
        start = 0;
    $('#next').click(function () {
        if (start + x < size_li) {
            $lis.slice(start, start + x).hide();
            start += x;
            $lis.slice(start, start + x).show();
        }
    });
    $('#prev').click(function () {
        if (start - x >= 0) {
            $lis.slice(start, start + x).hide();
            start -= x;
            $lis.slice(start, start + x).show();
        }
    });

});

所以这样可行，但我试图让它看起来更平滑并为其添加滑动过渡效果。

我已尝试添加

    -moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;

到li，但这没有用。任何想法如何做到这一点？

Answer 1

您可以尝试使用.fadeOut()和.fadeIn()代替.show()和.hide()。

http://api.jquery.com/fadeout/ jQuery中内置了更多这些函数，请查看文档以寻找替代方案。

Answer 2

你可以这样做

.hide("slide", { direction: "right" }, 1200);

或者根据需要尝试不同的效果

slideIn()

slideOut()

fadeOut()

fadeIn()

单击时仅显示前4个li和幻灯片转换

2 个答案: