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.

Must Read: CSS mini Framework Aimed to Display Isometric Cubes | Cube.CSS

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>

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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Leave a Reply

Your email address will not be published. Required fields are marked *