Develop Reference

How can I change slide by mouse scroll?

Is there any way I can get the example I have at https://jsfiddle.net/PortfolioCSG/wzcgp7y1/15/ to change slides by scrolling the users mouse (as well as using the navigation dots/arrows)?
I'd like for the user to be able to scroll through the slideshow/gallery without having to click the mouse if they don't want to, but I'm having trouble writing the code/finding something that works.
I've tried a few different javascript codes and have failed at this point.
TIA.
<div class="slideshow-container">
<div class="mySlides1 fade">
<!--Image here-->
<div class="image img1">Image 1-1</div>
</div>
<div class="mySlides1 fade">
<!--Image here-->
<div class="image img2">Image 1-2</div>
</div>
<div class="mySlides1 fade">
<!--Image here-->
<div class="image img3">Image 1-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a> <a class="next" onclick="plusSlides(1, 0)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,0)"></span> <span class="dot" onclick="currentSlide(2,0)"></span> <span class="dot" onclick="currentSlide(3,0)"></span> </div>
</div>
<div class="slideshow-container">
<div class="mySlides2 fade">
<!--Image here-->
<div class="image img1">Image 2-1</div>
</div>
<div class="mySlides2 fade">
<!--Image here-->
<div class="image img2">Image 2-2</div>
</div>
<div class="mySlides2 fade">
<!--Image here-->
<div class="image img3">Image 2-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a> <a class="next" onclick="plusSlides(1, 1)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,1)"></span> <span class="dot" onclick="currentSlide(2,1)"></span> <span class="dot" onclick="currentSlide(3,1)"></span> </div>
</div>
<div class="slideshow-container">
<div class="mySlides3 fade">
<!--Image here-->
<div class="image img1">Image 3-1</div>
</div>
<div class="mySlides3 fade">
<!--Image here-->
<div class="image img2">Image 3-2</div>
</div>
<div class="mySlides3 fade">
<!--Image here-->
<div class="image img3">Image 3-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a> <a class="next" onclick="plusSlides(1, 2)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,2)"></span> <span class="dot" onclick="currentSlide(2,2)"></span> <span class="dot" onclick="currentSlide(3,2)"></span> </div>
</div>
<div class="slideshow-container">
<div class="mySlides4 fade">
<!--Image here-->
<div class="image img1">Image 4-1</div>
</div>
<div class="mySlides4 fade">
<!--Image here-->
<div class="image img2">Image 4-2</div>
</div>
<div class="mySlides4 fade">
<!--Image here-->
<div class="image img3">Image 4-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a> <a class="next" onclick="plusSlides(1, 3)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,3)"></span> <span class="dot" onclick="currentSlide(2,3)"></span> <span class="dot" onclick="currentSlide(3,3)"></span> </div>
</div>
<div class="slideshow-container">
<div class="mySlides5 fade">
<!--Image here-->
<div class="image img1">Image 5-1</div>
</div>
<div class="mySlides5 fade">
<!--Image here-->
<div class="image img2">Image 5-2</div>
</div>
<div class="mySlides5 fade">
<!--Image here-->
<div class="image img3">Image 5-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a> <a class="next" onclick="plusSlides(1, 4)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,4)"></span> <span class="dot" onclick="currentSlide(2,4)"></span> <span class="dot" onclick="currentSlide(3,4)"></span> </div>
</div>
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5 {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin:0 auto 25px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/* 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
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next, .text {
font-size: 11px
}
}
/* The dots/bullets/indicators */
.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;
}
.image {
height:100px;
background:red;
}
.img1 {
background:red
}
.img2 {
background:yellow
}
.img3 {
background:green
}
var slideIndex = [1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function currentSlide(n, no) {
showSlides(slideIndex[no] = n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}

I'm not 100% certain of what you want, but here is an approach that may help you change images by scrolling.
How it works: the event listener triggers a function when the page has been scrolled. Then we use window.scrollY which returns the number of pixels that the document is currently scrolled vertically and we use this number to make the changes to the slider.
const slider = document.getElementById('slider');
document.addEventListener('scroll', (e) => {
let y = window.scrollY;
if(y < 100){
slider.src = "https://picsum.photos/id/50/300";
}
else if(y < 200){
slider.src = "https://picsum.photos/id/100/300";
}
else if(y < 300){
slider.src = "https://picsum.photos/id/200/300";
}
})
<body style="height:2000px">
<img id="slider" style="position:fixed" src="https://picsum.photos/id/50/300">
</body>

How to add another slideshow?

I am new to web coding and I can not figure out how to add another slideshow to the w3school example... see below. I would appreciate any help.
I understand, that I have to another slideshow class into my html but i do not know what I need to change in the javaScript, I tried to add another index but it did not work out...
Kind regards!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
</style>
</head>
<body>
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
I changed my code like this to achieve a third slideshow. Unfortunately, my slideshow shows only one image and on click to the next nothing happens...could someone please help me to find a solution?
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img src="img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img src="img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-3, 2)">❮</a>
<a class="next" onclick="plusSlides(3, 2)">❯</a>
</div>
<script>
var slideIndex = [3,3];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(3, 2);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>

add html:
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img src="img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img src="img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
change slideid to:
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
add this:
showSlides(1, 2);
change if to:
if (n < 2) {slideIndex[no] = x.length}
final result should be like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
</style>
</head>
<body>
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img src="img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img src="img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 2) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>

automaticaly scroll to the right of the page (depending on the size of the image)

I need a little help with creating JS that would automatically scroll to the right (image has 100% height, window is of a size of a phone) of the image. When it reaches the end of the image, it should stop.
Second part is, when I click the arrows (to show another image), it should do the same animation with the second image.
So far, I have this:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides1 fade">
<div class="numbertext">1 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-500px';">
</div>
<div class="mySlides1 fade">
<div class="numbertext">2 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption Two</div>
</div>
<div class="mySlides1 fade">
<div class="numbertext">3 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption Three</div>
</div>
<div class="mySlides1 fade">
<div class="numbertext">4 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption four</div>
</div>
<div class="mySlides1 fade">
<div class="numbertext">5 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption four</div>
</div>
<div class="mySlides1 fade">
<div class="numbertext">6 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption four</div>
</div>
<a class="prev" onclick="plusDivs(-1, 0)">❮</a>
<a class="next" onclick="plusDivs(1, 0)">❯</a>
</div>
<script>
var slideIndex = [1,1,1];
var slideId = ["mySlides1","mySlides2", "mySlides3"];
showDivs(1, 0); /*showDivs(1, 1); showDivs(1, 2);*/
function plusDivs(n, no) {
showDivs(slideIndex[no] += n, no);
}
function showDivs(n, no) {
var i; var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {
slideIndex[no] = 1
}
if (n < 1) {
slideIndex[no] = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
It works in terms that it does move the image to the side but not by the correct amount.
Just to make sure, the css is like this:
.slideshow-container {
height:100%;
overflow: hidden;
width: 100%;
}
.img {
height:100%;
left: 0px;
transition: all 5s ease-in-out;
/* margin: 0px;*/
}
img {
height:100%;
left: 0px;
transition: all 5s ease-in-out;
/* margin: 0px;*/
}
.mySlides1 {
display:block;
}
.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;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

previous button causing slideshow to disappear

I've taken a simple w3 Schools slideshow that was edited here by user Sinisake and edited the styles to remove the slide counter and caption, and edited the prev and next buttons to take up half of each side of the slide, with the cursor changing to indicate click.
The only problem is that when you click 'previous' on the first slide, the previousElementSibling is calling up an element that isn't there, and the whole slideshow disappears. I know this is happening because I changed the prev and next position, but I don't know why.
Also, I'm hiding the dots with display: none, but if I remove them from the html and javascript, the slideshow breaks.
I know a bit about CSS and html, but am very new at Javascript, so I appreciate everyone's patience and help.
My code is below, and the page is also hosted here: http://dominicfortunato.com/Template%20Studio%20Site/index-updated-slideshow-2.html
(function() {
init(); //on page load - show first slide, hidethe rest
function init() {
parents = document.getElementsByClassName('slideshow-container');
for (j = 0; j < parents.length; j++) {
var slides = parents[j].getElementsByClassName("mySlides");
var dots = parents[j].getElementsByClassName("dot");
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
dots = document.getElementsByClassName('dot'); //dots functionality
for (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
slides = this.parentNode.parentNode.getElementsByClassName("mySlides");
for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove('active');
slides[j].classList.remove('active-slide');
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.classList.add('active');
slides[index].classList.add('active-slide');
}
}
//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
current = this.parentNode;
var slides = current.getElementsByClassName("mySlides");
var dots = current.getElementsByClassName("dot");
curr_slide = current.getElementsByClassName('active-slide')[0];
curr_dot = current.getElementsByClassName('active')[0];
curr_slide.classList.remove('active-slide');
curr_dot.classList.remove('active');
if (this.className == 'next') {
if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
curr_slide.nextElementSibling.classList.add('active-slide');
curr_dot.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
if (this.className == 'prev') {
if (curr_slide.previousElementSibling.classList.contains('mySli‌​des')) {
curr_slide.previousElementSibling.classList.add('active-slide');
curr_dot.previousElementSibling.classList.add('active');
} else {
slides[slides.length - 1].classList.add('active-slide');
dots[slides.length - 1].classList.add('active');
}
}
}
}
})();
/* Slideshow container */
.slideshow-container {
max-width: 80%;
position: relative;
padding-top: 3%;
padding-bottom: 2%;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: url('Images/arrow.png'), w-resize;
float: left;
position: absolute;
width: 50%;
height: 90%;
margin-right: auto;
margin-left: auto;
transition: 0.3s ease;
border-radius: 0 0px 0px 0;
}
/* Position the "next button" to the right */
.next {
cursor: url('Images/arrow.png'), e-resize;
right: 0;
border-radius: 0px 0 0 0px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0);
}
.mySlides {
display:none;
}
.active-slide {
display:block;
}
.active-slide-1 {
display:block;
}
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: none;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 0.2s;
animation-name: fade;
animation-duration: 0.2s;
}
#-webkit-keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.text-container {
z-index: 300;
max-width: 80%;
float: center;
text-align: left;
position: relative;
margin-right: auto;
margin-left: auto;
padding-bottom: 2%;
font-family:"GT Walsheim", Calibri, sans-serif;
}
.project-description {
width: 100%;
font-size: 36px;
margin-left: 20px;
font-family:"GT Walsheim", Calibri, sans-serif;
display: inline;
}
.project-title {
width: 100%;
display: inline;
margin-left: 150px;
text-decoration: underline;
font-size: 36px;
}
<div class="slideshow-container">
<a class="prev" ></a>
<a class="next"></a>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://placehold.it/1000x350" style="width:100%">
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="text-container">
<div class="project-title">Rust Belt Riders</div>
<div class="project-description">Identity for Rust Belt Riders, a waste management and composting company from Cleveland. </div>
</div>
<br>
<div class="slideshow-container">
<a class="prev" ></a>
<a class="next"></a>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://placehold.it/1000x350" style="width:100%">
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="text-container">
<div class="project-title">Rust Belt Riders</div>
<div class="project-description">Identity for Rust Belt Riders, a waste management and composting company from Cleveland. </div>
</div>
<br>

this works for me: (you may have forgotten a dot in the second slider). Check out this Fiddle: https://jsfiddle.net/prtuxoxx/
<div class="slideshow-container">
<a class="prev" ></a>
<a class="next"></a>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://placehold.it/1000x350" style="width:100%">
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="text-container">
<div class="project-title">Rust Belt Riders</div>
<div class="project-description">Identity for Rust Belt Riders, a waste management and composting company from Cleveland. </div>
</div>
<br>
<div class="slideshow-container">
<a class="prev" ></a>
<a class="next"></a>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://placehold.it/1000x350" style="width:100%">
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="text-container">
<div class="project-title">Rust Belt Riders</div>
<div class="project-description">Identity for Rust Belt Riders, a waste management and composting company from Cleveland. </div>
</div>
and JS:
(function() {
init(); //on page load - show first slide, hidethe rest
function init() {
parents = document.getElementsByClassName('slideshow-container');
for (j = 0; j < parents.length; j++) {
var slides = parents[j].getElementsByClassName("mySlides");
var dots = parents[j].getElementsByClassName("dot");
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
dots = document.getElementsByClassName('dot'); //dots functionality
for (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
slides = this.parentNode.parentNode.getElementsByClassName("mySlides");
for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove('active');
slides[j].classList.remove('active-slide');
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.classList.add('active');
slides[index].classList.add('active-slide');
}
}
//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
current = this.parentNode;
var slides = current.getElementsByClassName("mySlides");
var dots = current.getElementsByClassName("dot");
curr_slide = current.getElementsByClassName('active-slide')[0];
curr_dot = current.getElementsByClassName('active')[0];
curr_slide.classList.remove('active-slide');
curr_dot.classList.remove('active');
if (this.className == 'next') {
console.log('next ', curr_slide);
if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
curr_slide.nextElementSibling.classList.add('active-slide');
curr_dot.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
if (this.className == 'prev') {
console.log('previous ', curr_slide);
if (curr_slide.previousElementSibling.classList.contains('mySlides')) {
curr_slide.previousElementSibling.classList.add('active-slide');
curr_dot.previousElementSibling.classList.add('active');
} else {
slides[slides.length - 1].classList.add('active-slide');
dots[slides.length - 1].classList.add('active');
}
}
}
}
})();

Put multiple slideshows using modals on a page

I'm trying to create a lightbox effect using modals and slideshows. It works just fine as long as only one slideshow is on a page. I would like to have multiple slideshow/lightboxs on a page. I am using the CSS and java from the link below in addition to bootstrap 3.
https://www.w3schools.com/howto/howto_js_lightbox.asp
Here is the code I modified from the link. I'm new at this so any help is appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BL Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/BLportfolio.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #FFFFFF;
}
a:link {
color: #B77433;
text-decoration: none;
}
a:hover {
color: #FFD600;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/averia-libre:n3:default.js" type="text/javascript"></script>
</head>
<body>
<!-- Illustration Section -->
<div class="container-fluid">
<div class="row"><h6>ILLUSTRATION</h6>
<div class="row">
<div class="item2">
<img src="images/illustration/thumbs/steampunkThumb.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/sdThumb.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/monsterThumb.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/weaselThumb.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/supermanThumb.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/bushThumb.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow">
</div>
<div class="row"><HR SIZE="2" WIDTH="95%"></div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="images/illustration/steampunk.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="images/illustration/sd.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="images/illustration/monster.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="images/illustration/weasel.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="images/illustration/superman.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="images/illustration/bush.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="item3">
<img class="demo" src="images/illustration/thumbs/steampunkThumb.jpg" onclick="currentSlide(1)" alt="STEAMPUNK">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/sdThumb.jpg" onclick="currentSlide(2)" alt="SAN DIEGO">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/monsterThumb.jpg" onclick="currentSlide(3)" alt="MONSTER">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/weaselThumb.jpg" onclick="currentSlide(4)" alt="WEASEL">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/supermanThumb.jpg" onclick="currentSlide(5)" alt="SUPERMAN">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/bushThumb.jpg" onclick="currentSlide(6)" alt="W">
</div>
</div>
</div>
<!-- Illustration End -->
<!-- Technical Section -->
<div class="container-fluid">
<div class="row"><h6>TECHNICAL DRAFTING</h6>
<div class="row">
<div class="item2">
<img src="images/technical/thumb/tech1Thumb.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech2Thumb.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech3Thumb.jpg" onclick="openModal();currentSlide(9)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech4Thumb.jpg" onclick="openModal();currentSlide(10)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech5Thumb.jpg" onclick="openModal();currentSlide(11)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech6Thumb.jpg" onclick="openModal();currentSlide(12)" class="hover-shadow">
</div>
<div class="row"><HR SIZE="2" WIDTH="95%"></div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="images/technical/tech1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="images/technical/tech2.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="images/technical/tech3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="images/technical/tech4.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="images/technical/tech5.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="images/technical/tech6.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="item3">
<img class="demo" src="images/technical/thumb/tech1Thumb.jpg" onclick="currentSlide(1)" alt="Tech1">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech2Thumb.jpg" onclick="currentSlide(2)" alt="Tech2">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech3Thumb.jpg" onclick="currentSlide(3)" alt="Tech3">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech4Thumb.jpg" onclick="currentSlide(4)" alt="Tech4">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech5Thumb.jpg" onclick="currentSlide(5)" alt="Tech5">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech6Thumb.jpg" onclick="currentSlide(6)" alt="Tech6">
</div>
</div>
</div>
<!-- Technical End -->
</div>
</div>
<footer class="row">
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Modal2 (background) */
.modal2 {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal2 Content */
.modal2-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
Java
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
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;
}

came looking for a different solution, but looking at the code, it seems that the error may be here...
<div class="item3">
<img class="demo" src="images/technical/thumb/tech1Thumb.jpg" onclick="currentSlide(1)" alt="Tech1">
</div>
In the 2nd batch, should not the "currentSlide(1) actually be a continuation from the 6 slides above, so the content should be currentSlide(7) and onward down the script? Perhaps it was too simple...