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>
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
How can I make the mainImage picture change places with the thumbnail and become the imgStyle picture?
I managed to move the thumbnail to the mainImage picture but I do not know what to do to move the main picture to the miniatures.
I'm happy for any advice.
var mini = document.getElementsByClassName('imgStyle');
for(var i = 0; i < mini.length; i++)
mini[i].addEventListener('click', function(e){
var imgUrl = this.src;
var mainUrl = document.getElementById('mainImage');
mainUrl.src = imgUrl;
});
.add_gallery{
width: 25%;
}
#mainImage{
width: 100%;
}
.miniatures{
width: 100%;
display: flex;
}
.imgStyle{
height: 100px;
}
<div class="add_gallery">
<div class="galery">
<img id="mainImage" src="https://thumbs.dreamstime.com/z/obsługuje-brać-obrazek-selfie-z-jego-smartphone-w-górach-zdjęcie-ruchomej-55632576.jpg" />
<br />
</div>
<div class="miniatures">
<img class="imgStyle" src="http://www.grhnarew.fora.pl/images/galleries/3876491244c9e14053175d-428229-wm.jpg">
<img class="imgStyle" src="http://sekretystronwww.pl/wp-content/uploads/2015/11/temat2015m_2.jpg">
<img class="imgStyle" src="http://www.bordercollie.fora.pl/images/galleries/1287702814bfa931698357-712854-wm.jpg">
<img class="imgStyle" src="https://img-ovh-cloud.zszywka.pl/0/0000/6629-cudowny-obrazek.jpg">
</div>
</div><!--add_gallery-->
You almost have it, just set the mini image that was clicked src to the main images src before you set it.
var mini = document.getElementsByClassName('imgStyle');
for(var i = 0; i < mini.length; i++)
mini[i].addEventListener('click', function(e){
var imgUrl = this.src;
var mainUrl = document.getElementById('mainImage');
this.src = mainUrl.src;
mainUrl.src = imgUrl;
});
.add_gallery{
width: 25%;
}
#mainImage{
width: 100%;
}
.miniatures{
width: 100%;
display: flex;
}
.imgStyle{
height: 100px;
}
<div class="add_gallery">
<div class="galery">
<img id="mainImage" src="https://thumbs.dreamstime.com/z/obsługuje-brać-obrazek-selfie-z-jego-smartphone-w-górach-zdjęcie-ruchomej-55632576.jpg" />
<br />
</div>
<div class="miniatures">
<img class="imgStyle" src="http://www.grhnarew.fora.pl/images/galleries/3876491244c9e14053175d-428229-wm.jpg">
<img class="imgStyle" src="http://sekretystronwww.pl/wp-content/uploads/2015/11/temat2015m_2.jpg">
<img class="imgStyle" src="http://www.bordercollie.fora.pl/images/galleries/1287702814bfa931698357-712854-wm.jpg">
<img class="imgStyle" src="https://img-ovh-cloud.zszywka.pl/0/0000/6629-cudowny-obrazek.jpg">
</div>
</div>
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>
(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>