Fullscreen Responsive Slideshow with Vanilla JavaScript and CSS3

Preview:

Description:

A pure vanilla JavaScript library to create a full page, responsive image slideshow or background slideshow with CSS3 powered transition effects.

How to use it:

Import the vanillaSlideshow.css and vanillaSlideshow.min.js into the web page.

<link rel="stylesheet" href="css/vanillaSlideshow.css">
<script src="js/vanillaSlideshow.min.js"></script>

Embed images into the slideshow with arrows and bullets navigation.

<div id="vanilla-slideshow-container">
  <div id="vanilla-slideshow">
    
    <div class="vanilla-slide">
      <img src="1.jpg" alt="Alt">
    </div>
    <div class="vanilla-slide" >
      <img src="2.jpg" alt="Alt">
    </div>
    
    <div class="vanilla-slide" >
      <img src="3.jpg" alt="Alt">
    </div>
    
    <div class="vanilla-slide" >
      <img src="4.jpg" alt="Alt">
    </div>
  </div>
  <!-- slideshow indicators -->
  <div id="vanilla-indicators"></div>
  <!-- slideshow arrows -->
  <div id="vanilla-slideshow-previous">
    <img src="images/arrow-previous.png" alt="slider arrow">
  </div>
  <div id="vanilla-slideshow-next">
    <img src="images/arrow-next.png" alt="slider arrow">
  </div>
</div>

If you want to create a background slideshow, use data-src attribute to embed images instead.

<div id="vanilla-slideshow">
  <div class="vanilla-slide" data-src="1.jpg"></div>
  <div class="vanilla-slide" data-src="2.jpg"></div>
  <div class="vanilla-slide" data-src="3.jpg"></div>
  <div class="vanilla-slide" data-src="4.jpg"></div>
</div>

Initialize the slideshow.

vanillaSlideshow.init({
  // auto slideshow, options: true or false
  slideshow: true,
  // slideshow delay
  delay: 5000,
  // display arrows, options: true or false
  arrows: true,
  // display indicators, options: true or false
  indicators: true,
  // start slideshow randomly, options: true or false
  random: false,
  // animation speed
  animationSpeed: '1s'
});