Automatic Animated Image Slider in JavaScript

Automatic Animated Image Slider in JavaScript
Code Snippet:Image slider with multiple controls and mobile swipe control (JavaScript)
Author: Hakeem
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 46,373
License: MIT
Edit Code online: View on CodePen
Read More

Yet another feature-rich responsive image slider to slide images with text. This JavaScript plugin helps you to create an animated automatic image slider. It comes with multiple controls (next/previous button, touch-swipe, and numbers navigation) to slide the images. You can integrate this slider into the hero section of the webpage to display products/posts with animated text.

This slider comes with a colorful user interface with SVG icons. Basically, it has an autoplay feature to automatically slide to the next image after a certain time period. Besides this, users can also navigate slider content through next/prev buttons or swipe (on touch devices).

You can control the sliding delay, transform value, and index value where to start the slider on load. Similarly, you can also customize its layout, size, and color by minor changes in CSS.

How to Create JavaScript Automatic Image Slider

1. Download this code snippet and include the slider CSS file into the head tag of your HTML document.

<!-- Animated Slider CSS -->
<link rel="stylesheet" href="css/animated-slider.css">

2. Create HTML structure for the automatic animated slider as follows:

<div class="container">
   <div class="slider">
      <div class="box1 box">
         <div class="bg"></div>
         <div class="details">
            <h1>Your heading</h1>
            <p>
               Description goes here...
            </p>
            <button onclick="location.href='https://www.codehim.com'">Check Now</button>
         </div>
         <div class="illustration">
            <div class="inner"></div>
         </div>
      </div>
      <div class="box2 box">
         <div class="bg"></div>
         <div class="details">
            <h1>You second heading</h1>
            <p>
               animated text goes here...
            </p>
            <button>Check Now</button>
         </div>
         <div class="illustration">
            <div class="inner"></div>
         </div>
      </div>
      <div class="box3 box">
         <div class="bg"></div>
         <div class="details">
            <h1>Your third heading</h1>
            <p>
              Your description goes here...
            </p>
            <button>Check Now</button>
         </div>
         <div class="illustration">
            <div class="inner"></div>
         </div>
      </div>
      <div class="box4 box">
         <div class="bg"></div>
         <div class="details">
            <h1>Your fourth heading</h1>
            <p>
             Your description goes here... 
            </p>
            <button>Check Now</button>
         </div>
         <div class="illustration">
            <div class="inner"></div>
         </div>
      </div>
      <div class="box5 box">
         <div class="bg"></div>
         <div class="details">
            <h1>Your fifth heading</h1>
            <p>
               Your description goes here...
            </p>
            <button>Check Now</button>
         </div>
         <div class="illustration">
            <div class="inner"></div>
         </div>
      </div>
   </div>
   <svg xmlns="http://www.w3.org/2000/svg" class="prev" width="56.898" height="91" viewBox="0 0 56.898 91">
      <path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(0 91) rotate(-90)" fill="#fff"/>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" class="next" width="56.898" height="91" viewBox="0 0 56.898 91">
      <path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(56.898) rotate(90)" fill="#fff"/>
   </svg>
   <div class="trail">
      <div class="box1 active">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
   </div>
</div>

3. Load GSAP.js, CSSRulePlugin Js, and animated slider JavaScript file before the closing of the body tag and done.

 <!-- gsap js -->     
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.2/gsap.min.js"></script>
<!-- CSSRulePlugin JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.2/CSSRulePlugin.min.js"></script>
<!-- Animated Slider JS -->
<script src="js/animated-slider.js"></script>

4. In order to set the custom value for the index, transform and delay, edit the Slider JavaScript file and modify the following variables.

// Transform value
let value = 0
// trail index number
let trailValue = 0
// interval (Duration)
let interval = 4000

That’s all! I hope you have successfully integrated this automatic image slider. If you have any questions or suggestions, let me know by comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X