How can I change slide by mouse scroll? - javascript

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>

Related

Skip to next div slideshow

I have a slideshow with some images. I change between divs that contain images with next and prev keys (every div contain an image). I want to be able to hide one of these picture. Not just hide it, but skipping to next div. The example is from w3school I want to be able to skip the images that have a specific class, not just hide them. Because when I tried to make display to none, this hided the image but the div is still showing.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let 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";
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {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 black background color with a little bit 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: 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;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#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}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="https://picsum.photos/220" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="dontview" style="display:none">
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="https://picsum.photos/212" style="width:100%">
<div class="text">Caption Two</div>
</div>
</div>
<div class="dontview" style="display:none">
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="https://picsum.photos/241" style="width:100%">
<div class="text">Caption Two</div>
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="https://picsum.photos/244" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="https://picsum.photos/201" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>

it better to write
<div class="mySlides fade dontview">
instead of
<div class="dontview" style="display:none">
<div class="mySlides fade">
then to skip element that has class dontview do
if (slides[slideIndex - 1].classList.contains("dontview")) {
return showSlides(slideIndex += 1)
}
demo
let slides = document.querySelectorAll(".mySlides"),
dots = document.querySelectorAll(".dot");
let slideIndex = 0;
showSlides(slideIndex);
function isSkip(n) {
return slides[slideIndex + n].classList.contains("dontview");
}
function plusSlides(n) {
if (n > 0) {
if (slideIndex == slides.length - 1)
return showSlides(slideIndex = 0)
if (isSkip(1)) {
slideIndex += 1
return plusSlides(1)
}
}
if (n < 0) {
if (slideIndex == 0)
return showSlides(slideIndex = slides.length - 1)
if (isSkip(-1)) {
slideIndex -= 1
return plusSlides(-1)
}
}
slideIndex += n
showSlides(slideIndex);
}
function showSlides(n) {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = slideIndex == i ? "block" : "none";
dots[i].className = slideIndex == i ? "dot active" : "dot";
}
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
*{box-sizing:border-box}
body{font-family:Verdana,sans-serif;margin:0}
.mySlides{display:none}
img{vertical-align:middle}
.slideshow-container{max-width:200px;position:relative;margin:auto}
.prev,.next{cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-22px;color:#fff;font-weight:700;font-size:18px;transition:.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:#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{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color .6s ease}
.active,.dot:hover{background-color:#717171}
.fade{animation-name:fade;animation-duration:1.5s}
#keyframes fade {from{opacity:.4}to{opacity:1}}
#media only screen and (max-width: 300px) {.prev,.next,.text{font-size:11px}}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="https://via.placeholder.com/200/0000FF/FFFFFF/?text=1" style="width:100%">
<div class="text">Caption one</div>
</div>
<div class="mySlides fade dontview">
<div class="numbertext">2 / 5</div>
<img src="https://via.placeholder.com/200/0000FF/FFFFFF/?text=2" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="https://via.placeholder.com/200/ff0000/FFFFFF/?text=3" style="width:100%">
<div class="text">Caption three</div>
</div>
<div class="mySlides fade dontview">
<div class="numbertext">4 / 5</div>
<img src="https://via.placeholder.com/200/FF0000/FFFFFF/?text=4" style="width:100%">
<div class="text">Caption four</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="https://via.placeholder.com/200/006600/FFFFFF/?text=5" style="width:100%">
<div class="text">Caption five</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(0)"></span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>

Multiple slides in one page - w3schools sample

I edited the w3schools example to put multiple sliders on a web page. The example shows two slides. I added a third. Now, the arrow on the right side shows all three images on all three sliders, but the arrow on the left side only shows two images.
w3schools Multi Sliders:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple
This is the original code plus the addition of a third slider.
html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 720px;
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" style="display: none;">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1" style="display: none;">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1" style="display: block;">
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-0, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2" style="display: none;">
<img src="https://www.w3schools.com/howto/img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2" style="display: none;">
<img src="https://www.w3schools.com/howto/img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2" style="display: block;">
<img src="https://www.w3schools.com/howto/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" style="display: none;">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides3" style="display: none;">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides3" style="display: block;">
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
<script>
let slideIndex = [1,1];
let 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) {
let i;
let 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>
So, I need the left arrow to show the 3 images, not 2 only.

How Do I Add A Third & Fourth Slideshow To This Code (and keep it functioning)?

I'm trying to use w3schools' multiple-slideshow on a friend's page that I'm working on - It works fine with only two slideshows but when you try to add more, things stop working. The third slideshow buttons control the second slideshow & the fourth doesn't show up on the page. I also added the little navigation dots from another w3 slideshow: goo.gl/2bFJk2 , but they don't work either.
I tried altering the code a bit, but my knowledge of JS is pretty limited so I'm sort of just shooting in the dark here. I added more "myslides" to the var slideID, more (1)'s to the var slideIndex and also added more "showslides", trying to use the pattern of the first two (#, #) but no luck so far.
If anyone could help me out with this I'd really appreciate it. Thanks
Here's the url for the w3 slideshow 'try it' page: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5 {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;
}
/* 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;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides1 fade">
<img src="http://i63.tinypic.com/ajy0x1.jpg" style="width:100%">
</div>
<div class="mySlides1 fade">
<img src="http://i65.tinypic.com/2i71vv4.jpg" style="width:100%">
</div>
<div class="mySlides1 fade">
<img src="http://i63.tinypic.com/6p6mhi.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</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>
<br>
<div class="slideshow-container">
<div class="mySlides2 fade">
<img src="http://i63.tinypic.com/ajy0x1.jpg" style="width:100%">
</div>
<div class="mySlides2 fade">
<img src="http://i65.tinypic.com/2i71vv4.jpg" style="width:100%">
</div>
<div class="mySlides2 fade">
<img src="http://i63.tinypic.com/6p6mhi.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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>
<br>
<div class="slideshow-container">
<div class="mySlides3 fade">
<img src="http://i63.tinypic.com/ajy0x1.jpg" style="width:100%">
</div>
<div class="mySlides3 fade">
<img src="http://i65.tinypic.com/2i71vv4.jpg" style="width:100%">
</div>
<div class="mySlides3 fade">
<img src="http://i63.tinypic.com/6p6mhi.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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>
<br>
<div class="slideshow-container">
<div class="mySlides4 fade">
<img src="http://i63.tinypic.com/ajy0x1.jpg" style="width:100%">
</div>
<div class="mySlides4 fade">
<img src="http://i65.tinypic.com/2i71vv4.jpg" style="width:100%">
</div>
<div class="mySlides4 fade">
<img src="http://i63.tinypic.com/6p6mhi.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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>
<br>
<div class="slideshow-container">
<div class="mySlides5 fade">
<img src="http://i63.tinypic.com/ajy0x1.jpg" style="width:100%">
</div>
<div class="mySlides5 fade">
<img src="http://i65.tinypic.com/2i71vv4.jpg" style="width:100%">
</div>
<div class="mySlides5 fade">
<img src="http://i63.tinypic.com/6p6mhi.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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>
<br>
<script>
var slideIndex = [1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(2, 1);
showSlides(3, 1);
showSlides(4, 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>
</body>
</html>

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

Categories

Resources