Modern Animated 3D Image Carousel In JavaScript

Preview:

Description:

A modern and animated image slider/carousel that rotates through images in a 3D space.

Based on imageloaded and GSAP JavaScript libraries.

How to use it:

1. Add images along with navigation icons and image descriptions to the carousel.

<div class="app">
  <div class="cardList">
    <!-- Left Icon -->
    <button class="cardList__btn btn btn--left">
      <div class="icon">
        <svg>
          <use xlink:href="#arrow-left"></use>
        </svg>
      </div>
    </button>
    <!-- Image 1 -->
    <div class="cards__wrapper">
      <div class="card current--card">
        <div class="card__image">
          <img src="1.jpg" alt="" />
        </div>
      </div>
      <!-- Image 2 -->
      <div class="card next--card">
        <div class="card__image">
          <img src="2.jpg" alt="" />
        </div>
      </div>
      <!-- Image 3 -->
      <div class="card previous--card">
        <div class="card__image">
          <img src="3.jpg" alt="" />
        </div>
      </div>
    </div>
    <!-- Right Icon -->
    <button class="cardList__btn btn btn--right">
      <div class="icon">
        <svg>
          <use xlink:href="#arrow-right"></use>
        </svg>
      </div>
    </button>
  </div>
  <!-- Image Descriptions -->
  <div class="infoList">
    <div class="info__wrapper">
      <div class="info current--info">
        <h1 class="text name">Title 1</h1>
        <h4 class="text location">Subtitle 1</h4>
        <p class="text description">Descrption 1</p>
      </div>
      <div class="info next--info">
        <h1 class="text name">Title 2</h1>
        <h4 class="text location">Subtitle 2</h4>
        <p class="text description">Descrption 3</p>
      </div>
      <div class="info previous--info">
        <h1 class="text name">Title 3</h1>
        <h4 class="text location">Subtitle 3</h4>
        <p class="text description">Descrption 3</p>
      </div>
    </div>
  </div>
  <!-- BG Images -->
  <div class="app__bg">
    <div class="app__bg__image current--image">
      <img src="1.jpg" alt="" />
    </div>
    <div class="app__bg__image next--image">
      <img src="2.jpg" alt="" />
    </div>
    <div class="app__bg__image previous--image">
      <img src="3.jpg" alt="" />
    </div>
  </div>
</div>
<!-- Needed SVG 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>

2. Code the HTML for the loader.

<div class="loading__wrapper">
  <div class="loader--text">Loading...</div>
  <div class="loader">
    <span></span>
  </div>
</div>

3. Load the required imageloaded and GSAP JavaScript libraries from CDN.

<script src="/path/to/cdn/imagesloaded.pkgd.min.js"></script>
<script src="/path/to/cdn/gsap.min.js"></script>

4. Load the main stylesheet and JavaScript in the document. Done.

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