<div class="carousel">
  <div class="slider">

    <div class="card">
      <!--
      <div class="card-bg" style="background-image: url(https://coverfiles.alphacoders.com/737/73733.jpg);">
      </div>
      -->
      <div class="card-bg" style="background-image: url(https://www.mobygames.com/images/covers/l/490197-star-wars-battlefront-ultimate-edition-playstation-4-front-cover.png);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://i.imgur.com/wKtxAnN.png);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://media.playstation.com/is/image/SCEA/star-wars-jedi-fallen-order-square-art-01-ps4-us-29may19?$native_nt$);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://dynaimage.cdn.cnn.com/cnn/c_fill,g_auto,w_1200,h_675,ar_16:9/https%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F200612170630-underscored-star-wars-squadrons-lead-1.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://lumiere-a.akamaihd.net/v1/images/lego-star-wars-skywalker-saga-main_c0051eca.jpeg?region=0%2C0%2C1000%2C999&width=960);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://droidjournal.com/wp-content/uploads/2020/04/ghost-of-tsushima.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://i.pinimg.com/originals/cd/51/83/cd51838b54314c40e11fb351b5b5eb74.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://www.mobygames.com/images/covers/l/330413-uncharted-4-a-thief-s-end-playstation-4-front-cover.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://www.rockstargames.com/V/img/global/order/mobile-cover.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://i.pinimg.com/originals/14/21/72/14217228af3726b095b9805b991e1c16.jpg);">
      </div>
    </div>

  </div>
</div>

/*
NOTES:
1. dragging is enabled;
2. clicking is enabled;
3. scrolling using keyboard arrow keys is enabled;
4. left and right arrows (on the screen) are disabled;
5. dots (on the screen) are disabled
6. everything mentioned above can be enabled / disabled by editing the js code
*/

* {
  box-sizing: border-box;
}

body {
  // background-color: #f78764;
  background-color: #4a5899;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;

  &.animation-reveal {
    animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1);
  }

  @keyframes reveal {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}

.card {
  margin: 0 1rem;
  overflow: hidden;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 35, 0.25);
  border-radius: 8px;
  height: 200px;
  width: 200px;
  display: block;
  position: relative;
  background-position: 50%;
  background-size: cover;
  cursor: pointer;
  transition: width 0.16s ease-in-out, height 0.16s ease-in-out;
}

.card.is-custom-selected {
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-bg {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
}

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  position: relative;
  height: 100%;
}

.flickity-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

(function ($) {
  $(function () {
    var slider = $(".slider").flickity({
      imagesLoaded: true,
      percentPosition: false,
      prevNextButtons: false, //true = enable on-screen arrows
      initialIndex: 3,
      pageDots: false, //true = enable on-screen dots
      groupCells: 1,
      selectedAttraction: 0.2,
      friction: 0.8,
      draggable: true //false = disable dragging
    });

    //this enables clicking on cards
    slider.on(
      "staticClick.flickity",
      function (event, pointer, cellElement, cellIndex) {
        if (typeof cellIndex == "number") {
          slider.flickity("selectCell", cellIndex);
        }
      }
    );

    //this resizes the cards and centers the carousel; the latter tends to move a few pixels to the right if .resize() and .reposition() aren't used
    var flkty = slider.data("flickity");
    flkty.selectedElement.classList.add("is-custom-selected");
    flkty.resize();
    flkty.reposition();
    let time = 0;
    function reposition() {
      flkty.reposition();
      if (time++ < 10) {
        requestAnimationFrame(reposition);
      } else {
        $(".flickity-prev-next-button").css("pointer-events", "auto");
      }
    }
    requestAnimationFrame(reposition);

    //this expands the cards when in focus
    flkty.on("settle", () => {
      $(".card").removeClass("is-custom-selected");
      $(".flickity-prev-next-button").css("pointer-events", "none");
      flkty.selectedElement.classList.add("is-custom-selected");

      let time = 0;
      function reposition() {
        flkty.reposition();
        if (time++ < 10) {
          requestAnimationFrame(reposition);
        } else {
          $(".flickity-prev-next-button").css("pointer-events", "auto");
        }
      }
      requestAnimationFrame(reposition);
    });

    //this reveals the carousel when the user loads / reloads the page
    $(".carousel").addClass("animation-reveal");
    $(".carousel").css("opacity", "0");
    flkty.resize();
    flkty.reposition();
    setTimeout(() => {
      $(".carousel").removeClass("animation-reveal");
      $(".carousel").css("opacity", "1");
      flkty.resize();
      flkty.reposition();
      let time = 0;
      function reposition() {
        flkty.reposition();
        if (time++ < 10) {
          requestAnimationFrame(reposition);
        }
      }
      requestAnimationFrame(reposition);
    }, 1000);
  });
})(jQuery);