Fullscreen 3D Carousel With JavaScript

Preview:

Description:

This is a responsive, fullscreen carousel that allows you to switch between images in a 3D space.

It uses imagesloaded library to detect if images are loaded and utilizes GSAP library for smooth animations.

How to use it:

1. Load the required Font Awesome iconic font and imagesloaded & GSAP libraries in the document.

<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />
<script src="/path/to/cdn/imagesloaded.pkgd.min.js"></script>
<script src="/path/to/cdn/gsap.min.js"></script>

2. Load the carousel’s JavaScript and CSS in the document.

<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>

3. Build the HTML for the 3D carousel.

<div class="app">
  <div class="cardList">
    <button class="cardList__btn btn btn--left">
      <div class="icon">
        <svg>
          <use xlink:href="#arrow-left"></use>
        </svg>
      </div>
    </button>
    <div class="cards__wrapper">
      <div class="card current--card">
        <div class="card__image">
          <img src="mwn-index.PNG" alt="" />
        </div>
      </div>
      <div class="card next--card">
        <div class="card__image">
          <img src="courses-index.PNG" alt="" />
        </div>
      </div>
      <div class="card previous--card">
        <div class="card__image">
          <img src="contact-index.PNG" alt="" />
        </div>
      </div>
    </div>
    <button class="cardList__btn btn btn--right">
      <div class="icon">
        <svg>
          <use xlink:href="#arrow-right"></use>
        </svg>
      </div>
    </button>
  </div>
  <div class="infoList">
    <div class="info__wrapper">
      <div class="info current--info">
        <h1 class="text name">LANDING PAGE</h1>
        <h4 class="text location">ABOUT</h4>
        <p class="text description">Boy studying</p>
      </div>
      <div class="info next--info">
        <h1 class="text name">LANDING PAGE</h1>
        <h4 class="text location">COURSES</h4>
        <p class="text description">Our available courses</p>
      </div>
      <div class="info previous--info">
        <h1 class="text name">LANDING PAGE</h1>
        <h4 class="text location">CONTACT</h4>
        <p class="text description">Asking the queries</p>
      </div>
    </div>
  </div>
  <div class="app__bg">
    <div class="app__bg__image current--image">
      <img src="mwn-index.PNG" alt="" />
    </div>
    <div class="app__bg__image next--image">
      <img src="courses-index.PNG" alt="" />
    </div>
    <div class="app__bg__image previous--image">
      <img src="contact-index.PNG" alt="" />
    </div>
  </div>
</div>
<!-- Loading Indicator -->
<div class="loading__wrapper">
  <div class="loader--text">Loading...</div>
  <div class="loader">
    <span></span>
  </div>
</div>
<!-- Icons -->
<svg class="icons" style="display: none">
  <symbol
    id="arrow-left"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 512 512"
  >
    <polyline
      points="328 112 184 256 328 400"
      style="
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 48px;
      "
    />
  </symbol>
  <symbol
    id="arrow-right"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 512 512"
  >
    <polyline
      points="184 112 328 256 184 400"
      style="
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 48px;
      "
    />
  </symbol>
</svg>