Tag: #slider

Web development

CSS Four Seasons Slider/ Animation

Post author By Lena Stanley
Post date April 21, 2022

To learn how to create the CSS Four Seasons Slider/ Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="four-seasons">
  <div class="window">
      <div>
  <input type="radio" id="spring" name="slideshow" value="spring">
  <label class="spring" for="spring">
    <div class="r-button1"></div>
    <div class="flowers"></div>
  </label>
  </div>
      <div>
  <input type="radio" id="summer" name="slideshow" value="summer">
  <label class="summer" for="summer">
    <div class="r-button2"></div>
    <div class="sun"></div>
  </label>
  </div>
      <div>
  <input type="radio" id="autumn" name="slideshow" value="autumn">
  <label class="autumn" for="autumn">
    <div class="r-button3"></div>
    <div class="leaf"></div>
  </label>
  </div>
      <div>
 <input type="radio" id="winter" name="slideshow" value="winter">
  <label class="winter" for="winter">
    <div class="r-button4"></div>
    <div class="snow"></div>
  </label>
  </div>
  </div>
  <div class="window-sill"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

 body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #718355;
}

.four-seasons {
  position: relative;
}

Style the window:

.window {
  position: relative;
  overflow: hidden;
  width: 330px;
  height: 250px;
  border: 10px solid white;
}
.window-sill {
    position: absolute;
    width: 400px;
    height: 20px;
    border-radius: 20px;
    background-color: #dda15e;
    left:-26px;
    box-shadow: inset 2px 2px 10px rgba(0,0,0,.2), 15px 15px rgba(0,0,0,.2);
}

Style the radio buttons:

.r-button1, .r-button2, .r-button3, .r-button4 {
  position: relative;
  display: block;
  border-radius: 50%; 
  background-color: transparent;
  cursor: pointer;
  border: 3px solid #dad7cd;
  transition: .3s;
  width:10px;
  height: 10px;
  z-index:10;
  top:210px;
}

.r-button1:before, .r-button2:before, .r-button3:before, .r-button4:before {
  content:"";
  position: absolute;
  height:7px;
  width:7px;
  background-color: transparent;
  transform: translate(-50%, -50%);
  left:50%;
  top:50%;
  border-radius:50%;
}

.r-button1 {
  left:115px;
}

.r-button2 {
  left:145px;
}

.r-button3 {
  left: 175px;
}

.r-button4 {
  left: 205px;
}

input#spring:checked ~ .spring {
  display: block;
  z-index:1;
}

input#summer:checked ~ .summer {
  display: block;
  z-index:1;
}

input#autumn:checked ~ .autumn {
  display: block;
  z-index:1;
}

input#winter:checked ~ .winter {
  display: block;
  z-index:1;
}

input {
  opacity: 0;
  cursor: pointer;
  display: block;
  position: absolute;
  outline: none;
  left: 0;
  z-index: 10;
}

input[type=radio]:checked + label .r-button1:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button1:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button1 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button2:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button2:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button2 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button3:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button3:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button3 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button4:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button4:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button4 {
  border-color: #a3b18a;
}

.spring, .summer, .autumn, .winter {
  position: absolute;
  width: 330px;
  height: 250px;
  transition: .3s;
}

Style and animate seasons:

.spring {
  background-color: #00b4d8;
}

.summer {
  background-color: #48cae4;
}

.autumn {
  background-color: #61a5c2;
}

.winter {
  background-color: #caf0f8;
}

.spring:before, .summer:before, .autumn:before, .winter:before {
  content:"";
  position: absolute;
  width:450px;
  height: 200px;
  border-radius:50%;
  left:-70px;
  top:160px;
}

.spring:after, .summer:after, .autumn:after, .winter:after {
  content:"";
  position: absolute;
  border-style: solid;
  border-width: 0 20px 60px 20px;
  top:65px;
  left:-2px;
}

.spring:before {
  background-color: #70e000;
  box-shadow: -150px -25px #38b000, 100px -30px #008000;
}

.summer:before {
  background-color: #38b000;
  box-shadow: -150px -25px #008000, 100px -30px #007200;
}

.autumn:before {
  background-color: #ca5310;
  box-shadow: -150px -25px #bb4d00, 100px -30px #8f250c;
}

.winter:before {
  background-color: #f8f9fa;
  box-shadow: -150px -25px #e9ecef, 100px -30px #dee2e6;
}

.window:before {
  content:"";
  position: absolute;
  background-color: #774936;
  width:7px;
  height: 10px;
  z-index:10;
  top:125px;
  left:15px;
  box-shadow: 30px 3px #774936, 170px 0 #774936, 270px 48px #774936;
}

.window:after {
    content:"";
    position: absolute;
    z-index:10;
    border-style: solid;
    border-width: 0 20px 60px 20px;
    border-color: transparent transparent #007f5f transparent;
    top: 70px;
    left:28px;
    filter: drop-shadow(240px 45px #007f5f);
}

.sun {
  position: absolute;
  border-radius:50%;
  width: 60px;
  height: 60px;
  background-color: #ffc300;
  left:50px;
  box-shadow: 0 0 50px #ffd60a;
  animation: sun 5s linear infinite;
}

.sun:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  left:7.5px;
  top: 7.5px;
  background-color: #f1dca7;
}

@keyframes sun {
  0% {
    box-shadow: 0 0 100px #ffd60a;
  }
  50% {
    box-shadow: 0 0 0 #ffd60a;
  }
}

.snow, .snow:before {
  position: absolute;
  border-radius:50%;
  width:5px; 
  height: 5px;
  background-color: #f8f9fa;
  box-shadow: 10px -20px #f8f9fa, 20px -30px #f8f9fa, 30px 30px #f8f9fa, -30px -30px #f8f9fa, 40px -20px #f8f9fa, 50px 20px #f8f9fa, 0 -30px #f8f9fa, 15px -60px #f8f9fa;
  filter: drop-shadow(50px -50px #f8f9fa) drop-shadow(150px -50px #f8f9fa) drop-shadow(200px -70px #f8f9fa) drop-shadow(50px -150px #f8f9fa) drop-shadow(0 -100px #f8f9fa);
  animation: snow 5s linear infinite;
}

.snow:before {
  content:"";
  animation-delay: 2.5s;
}

@keyframes snow {
  0% {transform: translateY(-50px);}
  100% {transform: translateY(300px);}
}

.spring:after {
  border-color: transparent transparent #38b000 transparent;
  filter: drop-shadow(170px 0 #38b000);
}

.summer:after {
  border-color: transparent transparent #008000 transparent;
  filter: drop-shadow(170px 0 #008000);
}

.autumn:after {
  border-color: transparent transparent #8d0801 transparent;
  filter: drop-shadow(170px 0 #8d0801);
}

.winter:after {
  border-color: transparent transparent #f8f9fa transparent;
  filter: drop-shadow(170px 0 #f8f9fa);
}

.flowers {
  position: absolute;
  width:5px;
  height: 10px;
  background-color: #fff;
  border-radius:10px;
  left:30px;
  top: 210px;
  filter: drop-shadow(50px -20px #ffd23f) drop-shadow(170px 0 #90e0ef) drop-shadow(40px 20px #ffb3c1);
}

.flowers:before {
    content:"";
    position: absolute;
    background-color: #fff;
    width:10px;
    height: 5px;
    border-radius: 10px;
    top:2.5px;
    left:-2.5px;
}

.leaf {
    position: absolute;
    background-color: #78290f;
    width: 15px;
    height: 15px;
    border-radius: 0 50% 0 50%;
    left:50px;
    animation: fall 5s linear infinite;
    box-shadow: 100px -50px #9e2a2b;
}

.leaf:before {
    content:"";
    position: absolute;
    border-radius: 50% 0 50% 0;
    width: 13px;
    height: 13px;
    background-color: #e09f3e;
    left:100px;
    animation-delay: 1s;
}

@keyframes fall {
  0% {top:-50px; transform: translateX(-50px) rotateX(180deg);}
  100% {top:250px; transform: translateX(150px) rotateX(-180deg);}
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Window Rain (Blind Open/Close) Animation

CSS & JavaScript Bee Progress Bar

CSS Bubble Animation

Tags #slider, #slideshow, <input>, CSS, CSS animation, HTML

Web development

Pure CSS Slider/ Slideshow

Post author By Lena Stanley
Post date October 10, 2021

To learn how to create the CSS Slider/ Slideshow follow the steps below:

Demo:

*to see the pure CSS slider/ slideshow on the website click here.

Step1.

Add HTML

<div class="slider">
  <div>
  <input type="radio" id="one" name="slideshow" value="one">
  <label class="one" for="one">
    <div class="r-button1"></div>
  </label>
  </div>
  <div>
  <input type="radio" id="two" name="slideshow" value="two">
  <label class="two" for="two">
    <div class="r-button2"></div>
  </label>
  </div>
  <div>
  <input type="radio" id="three" name="slideshow" value="three">
  <label class="three" for="three">
    <div class="r-button3"></div>
  </label>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.slider {
  position: relative;
  overflow: hidden;
  width: 320px;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 10px solid #dad7cd;
  box-shadow: 7px 7px 7px rgba(0,0,0,0.4);
}

Add the images:

.one, .two, .three {
  top:0;
  left:0;
  position: absolute;
  width: 320px;
  height: 240px;
  transition: .3s;
}

.one {
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/10/css-pumpkin.jpg);
  background-size: 320px 240px;
}

.two {
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg);
}

.three {
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/10/css-vampire.jpg);
  background-size: 320px 240px;
}

Make the slider work:

input#one:checked ~ .one {
  display: block;
  z-index:1;
}

input#two:checked ~ .two {
  display: block;
  z-index:1;
}

Style the radio buttons:

input {
  opacity: 0;
  cursor: pointer;
  display: block;
  position: absolute;
  outline: none;
  left: 0;
  z-index: 10;
}

input[type=radio]:checked + label .r-button1:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button1:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button1 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button2:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button2:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button2 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button3:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button3:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button3 {
  border-color: #a3b18a;
}

.r-button1, .r-button2, .r-button3 {
  position: relative;
  display: block;
  border-radius: 50%; 
  background-color: transparent;
  cursor: pointer;
  border: 3px solid #dad7cd;
  transition: .3s;
  width:10px;
  height: 10px;
  z-index:10;
  top:210px;
}

.r-button1:before, .r-button2:before, .r-button3:before {
  content:"";
  position: absolute;
  height:7px;
  width:7px;
  background-color: transparent;
  transform: translate(-50%, -50%);
  left:50%;
  top:50%;
  border-radius:50%;
}

.r-button1 {
  left:125px;
}

.r-button2 {
  left:155px;
}

.r-button3 {
  left: 185px;
}

Enjoy coding!

How to create the Comparison Slider?

Post author By Lena Stanley
Post date August 17, 2020

Learn how to create a Comparison Slider with CSS and JavaScript.

Demo:

Before & After:

What do you need to do?

Add HTML
Add CSS
Add JavaScript

Step1.

Add HTML

Add images that you want to compare:

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="https://lenadesign.org/wp-content/uploads/2021/04/make-up-1.jpg" width="640" height="480">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="https://lenadesign.org/wp-content/uploads/2021/04/no-make-up-1.jpg" width="640" height="480">
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  background-color: #eae2b7;
  display: flex; 
  align-items: center;
  justify-content: center;
  height: 100vh; 
}

.img-comp-container {
  left:-50px;
  position: relative;
  height: 480px; 
  width: 640px;
  border: 10px solid #e63946;
}

Set the position of the images:

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}

.img-comp-img img {
  display:block;
  vertical-align:middle;
}

Style the slider:

.img-comp-slider {
  position: absolute;
  cursor: ew-resize;
  width: 3px;
  height: 480px;
  background-color: white;
  color: white;
}

.img-comp-slider {
  position: absolute;
  cursor: ew-resize;
  width: 3px;
  height: 480px;
  background-color: white;
  color: white;
}

.img-comp-slider:before {
  content:"";
  position: absolute;
  content: url("https://lenadesign.org/wp-content/uploads/2021/04/dot-2.png");
  top:220px;
  left:-34px;  
}

.img-comp-slider:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.3); 
}

Step3.

Add JavaScript

function initComparisons() {
  var x, i;
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    w = img.offsetWidth;
    h = img.offsetHeight;
    img.style.width = (w / 2) + "px";
    
    /*slider:*/
    slider = document.createElement("DIV");
    slider.style.zIndex = "10";
    slider.setAttribute("class", "img-comp-slider");
    img.parentElement.insertBefore(slider, img);
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    slider.addEventListener("mousedown", slideReady);
    window.addEventListener("mouseup", slideFinish);
    slider.addEventListener("touchstart", slideReady);
    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      
      e.preventDefault();
      clicked = 1;
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      if (clicked == 0) return false;
      pos = getCursorPos(e)
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      a = img.getBoundingClientRect();
      x = e.pageX - a.left;
      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      img.style.width = x + "px";
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}

initComparisons();

Enjoy coding!

How to create a slider/ slideshow with CSS and JavaScript?

Post author By Lena Stanley
Post date March 8, 2020

In web design terminology, the term Slider is used for a slideshow added to a website. Sliders can improve the look of your web page, especially if you want to show the important content of your website.

We’ll go through four kinds of slideshows, and you can later decide which one can fit your web page.

Simple Slideshow
Automatic Slideshow
Slideshow gallery
jQuery Slideshow

SIMPLE SLIDESHOW

To learn how to create a simple responsive slideshow with CSS and JavaScript follow the steps below:

*slideshow opened in the Safari browser.
To see the live output on the website click here.

Step1.

Add HTML

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://lenadesign.org/wp-content/uploads/2020/02/functions.jpg" style="100%">
  <div class="text">Hello!</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://lenadesign.org/wp-content/uploads/2019/12/untitled1-1.gif" style="100%">
  <div class="text">You can write your text here!</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://lenadesign.org/wp-content/uploads/2019/12/javascript.jpg" style="100%">
  <div class="text">:D</div>
</div>

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

</div>
<br>

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

Step2.

Add CSS

body {font-family: Verdana, sans-serif; margin:0}
img {vertical-align: middle;}

.slideshow-container {
  position: relative;
  width: 640px;
  height: 480px;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #333;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

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

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

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

.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}
}


@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

Step3.

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 > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

To see the live output on the website go to: lenastanley.com

AUTOMATIC SLIDESHOW

*slideshow opened in the Safari browser.
To see the live output click here.

To learn how to create an Automatic responsive slideshow with CSS and JavaScript follow the steps below:

Step1.

Add HTML

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://lenadesign.org/wp-content/uploads/2021/01/window-winter-view.jpg" style="width:auto">
  <div class="text">Hello!</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://lenadesign.org/wp-content/uploads/2021/05/window-rain.jpg" style="width:auto">
  <div class="text">You can tape your text here.</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://lenadesign.org/wp-content/uploads/2020/04/CSS-Day-and-Night.jpg" style="width:auto">
  <div class="text">:D</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

Step2.

Add CSS

body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

.slideshow-container {
  width:640px;
  height: 480px;
  position: relative;
  margin: auto;
}

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

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

.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}
}

@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

Step3.

Add JavaScript

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 3000); // Change image every 3 seconds
}

To see the live output go to: lenastanley.com

SLIDESHOW GALLERY

*slideshow opened in the Safari browser.
To see the live output on the website click here.

To learn how to create a responsive Slideshow gallery with CSS and JavaScript follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/planet-with-moon.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 6</div>
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/soloar-system.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 6</div>
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/cssSaturn.jpg" style="width:100%">
  </div>
    
  <div class="mySlides">
    <div class="numbertext">4 / 6</div>
    <img src="https://lenadesign.org/wp-content/uploads/2021/02/blog-rocket.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 6</div>
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/earth-day.jpg" style="width:100%">
  </div>
    
  <div class="mySlides">
    <div class="numbertext">6 / 6</div>
    <img src="https://lenadesign.org/wp-content/uploads/2020/03/space.jpg" style="width:100%">
  </div>
    
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/05/planet-with-moon.jpg" style="width:auto" onclick="currentSlide(1)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/05/soloar-system.jpg" style="width:auto" onclick="currentSlide(2)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/05/cssSaturn.jpg" style="width:auto" onclick="currentSlide(3)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/02/blog-rocket.jpg" style="width:auto" onclick="currentSlide(4)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/05/earth-day.jpg" style="width:auto" onclick="currentSlide(5)">
    </div>    
    <div class="column">
      <img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2020/03/space.jpg" style="width:auto" onclick="currentSlide(6)">
    </div>
  </div>
</div>

Step2.

Add CSS

body {
  font-family: Arial;
  margin:0;
}

img {
  vertical-align: middle;
}


.container {
  position: relative;
  
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

Step3.

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("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

To see the live output on the website go to: lenastanley.com

JQUERY SLIDESHOW

*slideshow opened in the Safari browser.
To see the live output on the website click here.

To learn how to create a jQuery Slideshow follow the steps below:

Step1.

Add HTML

<div id="slideshow">
   <div>
     <img src="https://lenadesign.org/wp-content/uploads/2020/07/css-ice-cream.jpg">
   </div>
   <div>
     <img src="https://lenadesign.org/wp-content/uploads/2020/02/css-doughnut.jpg">
   </div>
    <div>
     <img src="https://lenadesign.org/wp-content/uploads/2021/03/happy-new-year-blog.jpg">
   </div>
</div>

Step2.

Add CSS

#slideshow {
  margin: 40px auto;
  position: relative;
  width: 640px;
  height: 480px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow > div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

Step3.

Add jQuery

$(document).ready(function(){
   $("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(50)
    .next()
    .fadeIn(50)
    .end()
    .appendTo('#slideshow');
}, 2000);
    slideshow.startSlideshow();
}(jQuery));

To see the live output on the website go to: lenastanley.com.

Enjoy coding!