We Keep Coding

Adding two image gallery messes eachother

I got an image gallery which includes some images under one big, The big one is one of the underneath ones. However, when I add a new image gallery this overwrites the old one and when I click on those pictures it changes the first gallery images which I don't want. I think there some error in my javascript code, and it's targetting all of my galleries, can I make it so it only target the clicked image?
Here is a fiddle: https://jsfiddle.net/u8pbtLra/
And here is the code
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 xSlides = slides.length;
alert(xSlides);
var slideIndexes = [0,1,0];
alert(slideIndexes);
var dots = document.getElementsByClassName("demo");
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";
}
html:
<div class="container2">
<div class="mySlides">
<div class = "bb" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328);"></div>
<!-- The above div is the problem -->
</div>
<div class="mySlides">
<img src="https://i.stack.imgur.com/FyV3d.gif" style="width:100%">
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328" onclick="currentSlide(1)" width="100%" alt="text">
</div>
<div class="column">
<img class="demo cursor" src="https://i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(2)" alt="text">
</div>
</div>
</div>

The issue with the code is that the same class is used for both galleries. If you don't want to rename the classes you can pass this to your click handler and then find the parent element. You can then pass the parent element to showSlides function to get the decedent slides.
There are ways to improve the code but I kept it as presented.
See this example:
var slideIndex = 1;
let wrappers = document.querySelectorAll(".wrapper");
wrappers.forEach(function(el) {
showSlides(slideIndex, el);
});
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(el, n) {
// Get the wrapper element and pass it as a variable to showSlides
let wrapper = el.closest(".wrapper");
showSlides(slideIndex = n, wrapper);
}
function showSlides(n, wrapper) {
var i;
// find only the slides and dot that are decedents of current wrapper
var slides = wrapper.querySelectorAll(".mySlides");
var dots = wrapper.querySelectorAll(".demo");
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";
}
.container3 {
position: absolute;
height: 100px;
width: 20%;
margin: auto;
right: 0;
left: 0;
}
.container2 {
position: absolute;
height: 100px;
width: 20%;
margin: auto;
right: 0;
left: 0;
bottom: 0;
}
.bb {
height: 100px;
background: center center no-repeat;
background-size: cover;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.row {
width: 100%;
display: flex;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
<!-- add wrapper class -->
<div class="container3 wrapper">
<div class="mySlides">
<div class="bb" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328);"></div>
<!-- The above div is the problem -->
</div>
<div class="mySlides">
<img src="https://i.stack.imgur.com/FyV3d.gif" style="width:100%">
</div>
<div class="row">
<div class="column">
<!-- pass this to handler -->
<img class="demo cursor" src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328" onclick="currentSlide(this,1)" width="100%" alt="text">
</div>
<div class="column">
<!-- pass this to handler -->
<img class="demo cursor" src="https://i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(this, 2)" alt="text">
</div>
</div>
</div>
<!-- add wrapper class -->
<div class="container2 wrapper">
<div class="mySlides">
<div class="bb" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328);"></div>
<!-- The above div is the problem -->
</div>
<div class="mySlides">
<img src="https://i.stack.imgur.com/FyV3d.gif" style="width:100%">
</div>
<div class="row">
<div class="column">
<!-- pass this to handler -->
<img class="demo cursor" src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328" onclick="currentSlide(this,1)" width="100%" alt="text">
</div>
<div class="column">
<!-- pass this to handler -->
<img class="demo cursor" src="https://i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(this, 2)" alt="text">
</div>
</div>
</div>

Carousel Transition - Automatic + Prev/Next - Additional effect

For information, i'm a beginner in coding. : - )
I use this code https://www.w3schools.com/howto/howto_js_slideshow.asp from W3Schools to put in place my carousel.
I added to the basic slideshow (with arrow next/prev) an automatic transition after 5 seconds, but when I click on prev or next, it adds the transition effect on automatic transition effect. It looks like a nightclub party.
I don't know how to execute the effect one time by action (click). Below is the modified JS I use.
var slideIndex = 0;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
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, 5000); // Change image every 2 seconds
}
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://placeimg.com/75/50/animals" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://placeimg.com/75/50/animals" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://placeimg.com/75/50/animals" style="width:100%">
<div class="text">Caption Three</div>
</div>
Do you have an idea ?
Many thanks !
Ludovic

The problem is that you added setTimeout(showSlides, 5000); to the showSlides function call so it will create another setTimeout call on each click making them seem to be faster. You need to remove the old timeout if the function is getting called before it is finished (as in when a click happens on the next slide button). I ignored the dots you can figure that one for yourself based on this example I assume.
I only show the lines I changed to get this working:
function plusSlides(n) {
// remove the slideIndex += n as showSlides automatically updates slideIndex
showSlides();
}
var slideTimer = null;
showSlides() {
// clear the timer so it doesn't fire too many times
if (slideTimer !== null) {
clearTimeout(slideTimer);
slideTimer = null;
}
/* rest of your code */
slideTimer = setTimeout(showSlides, 5000); // Change image every 5 seconds
}
Once you figure out how this implementation is working, I'd suggest to make your own by not keeping the slide index as variable in JS but by checking which is the current active slide.

How to adjust slideshow and enable people to click?

I am really bad with Javascript and is still learning. Recently, I have the idea of using an image slider for the website I am designing and I tried the Image Slider code from W3school. I tested the code, and tried the demo on the website.
In the website, I was able to click on the grey dots to move between pictures, however, when I pasted the code on my page, I was unable to move the images through clicking(the grey button cannot be clicked), and the only way the image is able to change is through its own animation time. I do not know what is wrong with it and I hope someone will be able to help me and tell me what's wrong.
Below is my Javascript code:
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
My HTML Slider code:
<div class="jumbotron" style="background:transparent !important;">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Images/Bulldog.jpg" style="width:100%;height: 300px">
<div class="text"><h2>Bulldog</h2></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="Images/Corgeek.jpg" style="width:100%;height: 300px">
<div class="text"><h2>Corgi</h2></div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="Images/HairyDog.jpg" style="width:100%;height: 300px;">
<div class="text"><h2>Furry Dog</h2></div>
</div>
</div>
</div>
Also, is there any better way to create a slideshow? If there is, it would be appreciated if there are links or solutions for me to see. Thank you.

I could be wrong, but you are using a jumbotron class, which indicates you are already loading Bootstrap. If this is the case, you already have a slideshow available to you.
You can read about the slideshow(carousel) here: https://getbootstrap.com/docs/4.0/components/carousel/
It will likely be easier to use, and less error prone than what you are currently working with.

I used carousel slides in multiple slides

I used carousel slides codes for JS, css and html for my multiple slides the problem is instead of playing at the same time the slides will wait for the 1st slides in the same page before the second slides will wait for the the 1st slide to finish before it will play
HTML page---->>
<section id="section">
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="slides/slide1.JPEG" style="width:100%">
<img class="mySlides" src="slides/slide2.JPEG" style="width:100%">
<img class="mySlides" src="slides/slide3.JPEG" style="width:100%">
<img class="mySlides" src="slides/slide4.JPEG" style="width:100%">
</div>
</section>
JS ---->>>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slideShow");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

Slideshow not working

(Sorry if this question has rlly simple answer!!). Anyways I'm trying to make two slideshows on the one page. Only one ever shows though. As in although I've added all the code for the second one, only the first one is visible on the page.
I'm only allowed to keep the code basic, but can do whatever with the javascript if that's what is the problem.
The javascript. I'm not sure what it means (sorry again) but it works for the one banner
<!-- script for slideshow ((copied from http://www.w3schools.com/w3css/w3css_slideshow.asp!)) -->
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 1000); <!-- time between slide change -->
}
</script>
The html code - for the second slideshow I copied the code between those two 'slideshow' notes into a different div (and changed the picture filenames)
<!--slideshow-->
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<!--END slideshow-->
This is the css (just the relevant container
specifications).
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.mySlides {
position: relative;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
width: 500px;
margin: auto;
border-radius: 25px;
}
Thank you in advance!!

If you copied the div with the same elements, and left the class names alone, then it makes sense that only one slideshow appears - but it should be a slideshow playing both sets of images (or duplicates, if the sets are the same). It's a somewhat simple fix. First, rename the class for the second set of images, so your HTML would be something like:
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<div class="slideshow-container">
<img class="mySlides2" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides2" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides2" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides2" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides2" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides2" src="images/2img6.jpg" alt="2img6.jpg">
</div>
Then you can basically double the code needed for one slideshow, and set it to use the class for the second set of images. Might be tough to picture in your head, but you may be able to see it here:
var xIndex = 0, yIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
var y = document.getElementsByClassName("mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < y.length; i++) {
y[i].style.display = "none";
}
xIndex++;
if (xIndex > x.length) {xIndex = 1}
x[xIndex-1].style.display = "block";
yIndex++;
if(yIndex > y.length) {yIndex = 1}
y[yIndex-1].style.display = "block";
setTimeout(carousel, 1000);
}
You can see I created a yIndex variable, and used y for .mySlides2 elements (instead of mySlides). I doubled the loop specifically for y instead of x, and incremented the yIndex in the same fashion as xIndex (same with setting it to one if it exceeds max number of images, and setting the next image to be displayed).
Here's a working Fiddle (well, working in a sense, the images are all broken, but the script works): https://jsfiddle.net/cchvncnd/

Great answer from #mark.hch.
However if you want stick with current Class. And let the function iterate it automatically, you may use this code, please review it
var myIndex = [];
carousel();
function carousel() {
var i, j;
var con = document.getElementsByClassName("slideshow-container");
for (j = 0; j < con.length; j++) {
myIndex[j] = myIndex[j] || 0;
for (i = 0; i < con[j].children.length; i++) {
con[j].children[i].style.display = "none";
}
if (myIndex[j] >= con[j].children.length) {
myIndex[j] = 0;
}
con[j].children[myIndex[j]].style.display = "block";
myIndex[j] ++;
}
setTimeout(carousel, 1000); <!-- time between slide change -->
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
display: inline-block;
height: 200px;
width: 500px;
border: 1px solid green;
}
.mySlides {
position: relative;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
border-radius: 25px;
}
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<div class="slideshow-container">
<img class="mySlides" src="images/1img1.jpg" alt="1img1.jpg">
<img class="mySlides" src="images/1img2.jpg" alt="1img2.jpg">
<img class="mySlides" src="images/1img3.jpg" alt="1img3.jpg">
<img class="mySlides" src="images/1img4.jpg" alt="1img4.jpg">
<img class="mySlides" src="images/1img5.jpg" alt="1img5.jpg">
<img class="mySlides" src="images/1img6.jpg" alt="1img6.jpg">
</div>