Fullsreen Image Slideshow In Pure JavaScript – slider-show

Preview:

Description:

slider-show is a responsive, mobile-compatible, fullscreen image slideshow written in pure JavaScript and CSS/CSS3.

It provides an Autoplay control which allows you to play/pause/resume the automatic cross-fading animation.

You can also manually switch between those images by clicking/tapping the pre/next buttons displayed in the bottom control bar.

How to use it:

1. Add images to the slideshow.

<div id="slider">
  <img class="selected" src="1.jpg" alt="Alt 1" />
  <img src="2.jpg" alt="Alt 2" />
  <img src="3.jpg" alt="Alt 3" />
  <img src="4.jpg" alt="Alt 4" />
  <img src="5.jpg" alt="Alt 5" />
</div>

2. Add controls to the slideshow.

<div class="controls">
  <button id="prev">Prev</button>
  <button id="stop">Pause</button>
  <button id="next">Next</button>
</div>

3. The necessary CSS styles for the slideshow & controls.

#slider {
  width: 100%;
  height: 100vh;
  max-height: 100%;
  position: relative;
}

#slider img {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s linear;
}

#slider img.selected {
  opacity: 1;
}

.controls {
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  bottom: 0px;
  width: 100%;
  height: 30px;
  padding: 40px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.controls button {
  display: block;
  border: 1px solid rgb(185, 185, 185);
  background: transparent;
  background-size: 200%;
  padding: 10px 30px;
  min-width: 110px;
  color: rgb(185, 185, 185);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 0.2s all linear;
  -webkit-tap-highlight-color: transparent;
}

.controls button:hover {
  color: #fff;
  border-color: #fff;
}

@media (max-width: 600px) {
  .controls button {
    font-size: 10px;
    width: 70px;
  }
  .controls {
    padding: 50px 10px;
  }
}

3. Download and insert the main JavaScript into the document. Done.

<script src="js/script.js"></script>