JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div class="container">
  <ul class="grow-carousel">
    <li>
      <div>
        <img src="https://images.unsplash.com/photo-1585194329143-ad92c5b1ede0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      </div>
    </li>
    <li>
      <div>
        <img src="https://images.unsplash.com/photo-1585001994793-7a4b117bcdcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      </div>
    </li>
    <li>
      <div><img src="https://images.unsplash.com/photo-1585225465920-594394872d48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" /></div>
    </li>
  </ul>
</div>

SCSS

.container {
  width: 660px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
 //transition: all 3s ease;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100%;

  li {
    position: relative;
    font-size: 80px;
    color: #fff;
    text-align: center;
    margin: 10px;
    padding: 20px;
    background: #333;
    height: 260px;
    width: calc(220px - 60px);
    transition: all 0.3s ease-in;
    transition-delay: 250ms;
    overflow: hidden;
    display: inline;
    float: left;

    img {
      height: 100%;
      width: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &.active {
      height: 300px;
    }
  }
}

#btn-next {
  position: relative;
  top: -29px;
  margin-left: 101px;
  background: #ccc;
  padding: 2px 3px;
}

#btn-prev {
  position: relative;
  top: -29px;
  margin-left: 10px;
  background: #ccc;
  padding: 2px 3px;
}

JavaScript

var slider = $(".grow-carousel"),
  item_width = slider.parent().outerWidth() / 3;

if (slider.children("li").length > 1) {
  // Add previous/next buttons
  slider
    .parent()
    .append(
      '<a href="#" id="btn-prev"><i class="fa fa-angle-left"></i><span>Previous</span></a><a href="#" id="btn-next"><i class="fa fa-angle-right"></i><span>Next</span></a>'
    );

  slider.find("li").first().addClass("active");

  // Handle clicks on the next button
  slider.parent().on("click", "a#btn-prev", function (e) {
    e.preventDefault();
    $(".grow-carousel li").removeClass("active");
    slider.children("li:last").prependTo(slider);
    slider.css("left", -item_width);
    slider.animate(
      {
        left: 0
      },
      1000,
      "swing"
    );

    slider.find("li").first().addClass("active");
  });

  // Handle clicks on the previous button
  slider.parent().on("click", "a#btn-next", function (e) {
    e.preventDefault();
    $(".grow-carousel li").removeClass("active");
    slider.animate(
      {
        left: -item_width
      },
      1000,
      "swing",
      function () {
        
        slider.css("left", 0);
				slider.children("li:first").appendTo(slider);
				slider.find("li").first().addClass("active");
      }
    );
  });
}