3d Image Slideshow Using HTML and CSS in Bootstrap

Animated Slider is a simple circular image similar to the one in the bootstrap. However, this will be generated in HTML CSS, and JavaScript.

3d animated slider, 3d image slideshow using html and css, slick slider 3d carousel, animated carousel slider, responsive slider with text animation

Responsive Fullscreen Image Slideshow/Gallery Plugin | Story-Show-Gallery

How to make use of it:

1. Add images 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. HTML code for the loader.

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

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

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

4. Load the main style sheet and javascript into the document.

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

Modern Animated 3D Image Carousel In JavaScript, Animated-Slider Plugin/Github, responsive animated slider

See Demo And Download

Official Website(Epic-programmer-official): Click Here

This superior jQuery/javascript plugin is developed by Epic-programmer-official. For extra advanced usage, please go to the official website.