Fullscreen Responsive Slideshow with Vanilla JavaScript and CSS3

Category: Javascript , Slideshow | July 22, 2015
Views Total:10,240 views
Official Page:Go to website
Last Update:July 22, 2015


Fullscreen Responsive Slideshow with Vanilla JavaScript and CSS3


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

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>

Initialize the slideshow.

  // 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'

You Might Be Interested In:

Leave a Reply