(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>
Related
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>
I really need help, i'll be eternally grateful if I could solve this as soon as possible.
I'm only trying it with JavaScript but if you've an idea of its css also I can work with that. And kindly notes its an automatic slideshow.
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
/* i dont have a css code, if you suggest i add it kindly reply */
<div class="container">
<img class="mySlides" src="img1.jpeg">
<img class="mySlides" src="img2.jpeg">
<img class="mySlides" src="img3.jpeg">
<img class="mySlides" src="img4.jpeg">
<img class="mySlides" src="img5.jpeg">
<img class="mySlides" src="img6.jpeg">
<img class="mySlides" src="img7.jpeg">
<img class="mySlides" src="img8.jpeg">
strong text
I'am working on a project that i need to change the background like every 10 seconds to make it work like an "Carousel". But i cant find a working solution so that why i'am asking you guys for help
Here is the code in html and css and it is the javascript i need help with
Html:
div class="parallax">
Css
.parallax {
background-image: url("../img/1.jpg");
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover; }
I appreciate your help with anything you can help me with
See if this helps: https://jsfiddle.net/zaedmfLs/
var myIndex = 0;
setInterval(carousel, 2000);
function carousel() {
var i;
var x = document.getElementsByClassName("myslides");
for (i = 0; i < x.length; i++) {
console.log("Carousel");
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
}
<div class="photobanner" style="max-height:460px">
<img class="myslides" src="http://www.gstatic.com/webp/gallery/1.jpg" style="height:100%" />
<img class="myslides" src="http://www.gstatic.com/webp/gallery/2.jpg" style="height:100%" />
<img class="myslides" src="http://www.gstatic.com/webp/gallery/1.jpg" style="height:100%" />
<img class="myslides" src="http://www.gstatic.com/webp/gallery/2.jpg" style="height:100%" />
<img class="myslides" src="http://www.gstatic.com/webp/gallery/1.jpg" style="height:100%" />
<img class="myslides" src="http://www.gstatic.com/webp/gallery/2.jpg" style="height:100%" />
</div>
I am currently trying to make a website home page with a slide show running in the middle using HTML,CSS and Javascript. I have completed the placement of the slide show but once the whole slide show runs(3 images) it moves up. Why is this happening and how could it fix it. Thanks for any help in advance. I have tried placing the images both inside of the html and outside and both ways it isn't working
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
}
div5 {
width: 325 px;
style="position: absolute;
top: 0 px;
left: 0 px;
}
<div5 class="slideshow-container">
<div5 class="mySlides fade">
<div5 class="numbertext"></div5>
<img src="picture1.jpg" style="width:50%">
<div5 class="text"></div5>
</div5>
<div5 class="mySlides fade">
<div5 class="numbertext"></div5>
<img src="picture2.jpg" style="width:50%">
<div5 class="text"></div5>
</div5>
<div5 class="mySlides fade">
<div5 class="numbertext"></div5>
<img src="picture3.jpg" style="width:50%">
<div5 class="text"></div5>
</div5>
<div5 style="position: absolute; top:200px; left:500px" </div5>
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>