Fullscreen Html Presentation with Pure Vanilla JavaScript – vanillaJSslides

Preview:

Description:

vanillaJSslides.js is a vanilla JavaScript library for creating a fullscreen, interactive html slideshow which allows you to navigate between slide decks using keyboard arrows or arrows navigation on the screen.

Basic usage:

Load the necessary vanillaJSslides.js in your document.

<script src="path/to/slides.min.js"></script>

Add slide decks with an arrows navigation to the presentation following the html structure as displayed below.

<div class="wrap">
  <div class="slideshow">
    <div class="slide" data-count="1">
      <div class="content"> Slide 1 </div>
    </div>
    <div class="slide" data-count="2">
      <div class="content"> Slide 2 </div>
    </div>
    <div class="slide" data-count="1">
      <div class="content"> Slide 3 </div>
    </div>
  </div>
  <div class="arrows"> <svg height="20" width="40" class="arrow right" id="arrow-right">
    <polygon points="20,0 40,20 0,20" />
    Sorry, your browser does not support inline SVG. </svg> <svg height="20" width="40" class="arrow left" id="arrow-left">
    <polygon points="20,0 40,20 0,20" />
    Sorry, your browser does not support inline SVG. </svg> </div>
</div>

The core CSS / CSS3 styles for the html slideshow.

.slideshow {
  background: #ff006c;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff006c), color-stop(50%, #7d2ded), color-stop(100%, #25b7c4));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff006c', endColorstr='#25b7c4', GradientType=0 );
  /* IE6-9 */
  width: 100%;
  position: relative;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.slideshow .slide {
  width: 100%;
  position: relative;
}
.slideshow .slide.active { display: block; }
.slideshow .content {
  padding-top: 30px;
  padding-bottom: 30px;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.slideshow .content img {
  width: 100%;
  max-width: 100%;
  margin-bottom: 15px;
}
.arrows {
  position: fixed;
  width: 70px;
  height: 46px;
  bottom: 30px;
  right: 30px;
}
.arrows svg {
  position: absolute;
  opacity: .5;
}
.arrows svg.active {
  opacity: 1;
  cursor: pointer;
}
.arrows .up {
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0;
}
.arrows .down {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(180deg);
  -moz-transform: translateX(-50%) rotate(180deg);
  -ms-transform: translateX(-50%) rotate(180deg);
  -o-transform: translateX(-50%) rotate(180deg);
  transform: translateX(-50%) rotate(180deg);
  opacity: 0;
}
.arrows .right {
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  -o-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
  right: 0;
}
.arrows .left {
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
  left: 0;
}
.arrows polygon { fill: #fff; }

Changelog:

07/19/2018

• refactor: keep content within window view, shrink to fit window height