Fullscreen Responsive Slideshow with Vanilla JavaScript and CSS3

Category: Javascript , Slideshow | July 22, 2015
Author: DimitriMikadze
Views Total: 4,308
Official Page: Go to website
Last Update: July 22, 2015
License: MIT

Preview:

Fullscreen Responsive Slideshow with Vanilla JavaScript and CSS3

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'
});

You Might Be Interested In:


Leave a Reply