How to add another slideshow? - javascript

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>

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

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);
}

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