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.