previous button causing slideshow to disappear

previous button causing slideshow to disappear - javascript

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

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>

Add a Carousel Slideshow gallery

I'm learning HTML, CSS and Java.
I'm tryng to add to my website a slideshow but i don't understand why i don't see nothing when i try to run it. I found this one and i'm try to make it work but i can't see an image, i can see only the pointer to go next or back.
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="FotoGP.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img src="FotoSalaPesi.jpg" style="width:100%">
<div class="text">Sala Pesi</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img src="FotoSalaCardio.jpg" style="width:100%">
<div class="text">Cardio</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img src="FotoSalaCircuiti.jpg" style="width:100%">
<div class="text">Circuiti Funzionali</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img src="FotoSalaAddominali.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img src="FotoSalaGambe.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img src="FotoSalaBilanceri.jpg" style="width:100%">
<div class="text">Sala Pesi</div>
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img src="FotoAperto.jpg" style="width:100%">
<div class="text">All'aperto</div>
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img src="FotoUfficio.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
<span class="dot" onclick="currentSlide(9)"></span>
</div>
This is CSS part
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
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 {
-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}
}
And JS
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
what i'm missing? Thank you for your help!

The path of your image seems not right
Look it works with placeholders
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {
box-sizing: border-box
}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
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 {
-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
}
}
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="https://via.placeholder.com/150" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Sala Pesi</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Cardio</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Circuiti Funzionali</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img src="https://via.placeholder.com/150" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img src="FotoSalaGambe.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img src="FotoSalaBilanceri.jpg" style="width:100%">
<div class="text">Sala Pesi</div>
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img src="FotoAperto.jpg" style="width:100%">
<div class="text">All'aperto</div>
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img src="FotoUfficio.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
<span class="dot" onclick="currentSlide(9)"></span>
</div>

I don't know how new you are to HTML but here are some common fixes:
Make sure to double-check your image sources are correct. And if you they are in a another directory, include the relative path to the image. Ex.: <img src="images/FotoAperto.jpg">
Make sure you have your css imports right. <link rel="stylesheet" href="style.css">
Check if your JS script is imported right, and place the <script> tag after the closing</body>-tag <script src="index.js"></script>.
I hope it helped :)

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

Develop Reference

JavaScript is the programming language of the Web.

previous button causing slideshow to disappear - javascript

Related

Skip to next div slideshow

Multiple slides in one page - w3schools sample

How can I change slide by mouse scroll?

Add a Carousel Slideshow gallery

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

Categories

Resources