JavaScript Slideshow with Glass Shadow Effect

This JavaScript code snippet helps you to create a sleek image slideshow with a captivating glass shadow effect. The HTML section defines the image container, while the CSS styling enhances the visuals. The JavaScript orchestrates the slideshow, smoothly transitioning between images every 2 seconds.

The glass shadow effect is achieved through carefully crafted CSS properties. You can easily implement this code for a stylish image showcase on your webpage.

How to Create Javascript Slideshow With Glass Shadow Effect

1.  First of all, copy the following HTML code and paste it into your HTML file where you want the slideshow to appear. The <div id="slideshow"> element contains the images you want to showcase. Replace the "path/to/your-img.jpg" with the URL of your own images.

<div id="slideshow">
  <img class="is-active" src="path/to/your-img.jpg" alt="" />
  <img src="path/to/your-img.jpg" alt="" />
  <img src="path/to/your-img.jpg" alt="" />
  <img src="path/to/your-img.jpg" alt="" />
  <img src="path/to/your-img.jpg" alt="" />
</div>

2. Copy the following CSS code into your stylesheet (or within a <style> tag in your HTML file) to style the slideshow and create the glass shadow effect.

*{
  box-sizing: border-box;
}
body{ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)) !important;
}
#slideshow{
  height: 800px;
  margin: auto;
  max-width: 500px;
  position: relative;
}

#slideshow img{
  border-radius: 40px;
  border: 20px solid #222;
  height: auto;
  opacity: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  -webkit-transition: 1s all;
  -webkit-transform: scale(1);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
  -webkit-backface-visibility: hidden;
}

#slideshow .is-active{
  opacity: 1;
  left: 0;
  top: 0;
  z-index: 2;
  -webkit-transition: 1s all;
  -webkit-transform: scale(.8);
  -webkit-backface-visibility: hidden;
}

3. Finally, copy the JavaScript code into a new or existing script file. This script controls the slideshow’s functionality. It initiates the slideshow and sets a timer for automatic transitions every 2 seconds. You can adjust the interval by changing the 2000 in setInterval to your preferred duration in milliseconds.

(function(){

  var slideshow = document.getElementById('slideshow'),
      imgs = slideshow.getElementsByTagName('img'),
      count = 0,
      timer,
      previous;

  function next(){
    previous = count > 0 ? count - 1 : 0;
    imgs[ previous ].className = imgs[ previous ].className.replace(/\bis\-active\b/i, '' );
    
    if( count < imgs.length ){
      imgs[ count ].className += 'is-active';
      count++;
    }  
    else{
      count = 0;
      next();
    }
  }

  next();

  timer = setInterval(function(){
    next();
  }, 2000);

})();

That’s all! hopefully, you have successfully created a Slideshow with the Glass Shadow Effect on your webpage. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.