Show only first 4 li and slide transition on click

Question

I've built a thumbnail carousel which only displays 4 li items at a time. This is the code. 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>

The JS to show only 4 li at a time:

$(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();
        }
    });

});

So this works, but I'm trying to get it to look a bit smoother and add a sliding transition effect to it.

I've tried adding

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

to the li but this didn't work. Any ideas how to do this?

Answer 1

You could try .fadeOut() and .fadeIn() instead of .show() and .hide() .

http://api.jquery.com/fadeout/ There are more of these functions built into jQuery, check the docs for alternatives.

Answer 2

You can do it like this

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

Or you try different effects as per your need

slideIn()

slideOut()

fadeOut()

fadeIn()