Creating Slideshows

Let me show you how-to create a Slideshow with HTML, CSS and JavaScript. A slideshow, also known as a Carousel, is used to cycle through elements such as text blocks or images. I am going to put together the 3 steps to building a very simple slideshow

Build the HTML


<div class="slideshow-container">
  
<div class="mySlides fade">
    
<div class="numbertext">1 / 3</div>

    <img src="img1.jpg" style="width:100%">
    
<div class="text">Caption Text</div>

  </div>


  
<div class="mySlides fade">
    
<div class="numbertext">2 / 3</div>

    <img src="img2.jpg" style="width:100%">
    
<div class="text">Caption Two</div>

  </div>


  
<div class="mySlides fade">
    
<div class="numbertext">3 / 3</div>

    <img src="img3.jpg" style="width:100%">
    
<div class="text">Caption Three</div>

  </div>


  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>




<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

Next Add CSS:

Style the next and previous buttons, the caption text and the dots.

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

/* Next and previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with some see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

Finally Add JavaScript

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n &gt; slides.length) {slideIndex = 1}
if (n &lt; 1) {slideIndex = slides.length}
for (i = 0; i &lt; slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i &lt; dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

How To Create a Modal Box is next up in my stack of quick-steps creation. Meanwhile, if you can’t wait, there is one out on w3schools.com

Zume-Pizza and npm code

Turns out there is a Pizza delivery service named Zume. However I came across Zume as a software package, because I was intrigued when I saw it in some code the other day. As an npm package, Zume is, “An opinionated static-site generator with gulp”. Created by oscarotero, who also created the jquery cheat-sheet, which is where I saw the code. And so far I haven’t been able to find any tutorials about it. Dang, so maybe its a 1-off. Yeap, the guy has created 38+ packages on NPM website.

I was originally digging into this because I want to really learn jQuery, or better than I do.  So here is a link to his GitHub repo on the jQuery cheat-sheet. And then I took a quick peak at his over-all GitHub, and he writes a lot of code, 1,737 commits this past year. But he takes his 2 days a week off during the week. Much like I do.

 

Really Learning JavaScript

At what point do you really know JavaScript?

Callbacks, promises, and a bunch of concepts you need to understand on top of just how to program loops and control flow. What are javascript closures and why would you use them?

More questions below…

underscore@1.8.3 (http://underscorejs.org/)

Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. Underscore provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on. A complete Test Suite is included.

I mean this stuff is so cool and powerful, they are porting it to chinese, PHP, Swift, Ruby, and a bunch of other computer language ports.


jquery@3.2.1 is out, and we know lots about jQuery, and yet there is tons I don’t know about it.

Lodash

A modern JavaScript utility library delivering modularity, performance & extras. Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc. Lodash’s modular methods are great for:

  • Iterating arrays, objects, & strings
  • Manipulating & testing values
  • Creating composite functions

https://www.npmjs.com/package/lodash-webpack-plugin

Then you have these odd things pop up in tutorials and samples and people just seem to think you should know this stuff. Like BigNumber.js

bignumber.js (https://github.com/MikeMcl/bignumber.js/blob/master/README.md)

Say what? A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic.


First there were callbacks, which lead to call-back hell, 

Then came (.then()) came Promises. Promises came out in 2015 with ES6
and
 
Now we have Async/Await, which came out with ES7 in 2017