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>
Related
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
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, 2000); // Change image every 2 seconds
}
.mySlides {display:none;}
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:600px">
<img class="mySlides" src="cigand1.jpeg" style="width:30%">
<img class="mySlides" src="eu1.jpeg" style="width:30%">
<img class="mySlides" src="hun1.jpg" style="width:30%">
</div>
</body>
I think the code is right, but the third image is bigger in the slideshow than I want. I resized the image but does not work.
How to solve this problem? Did you meet problem like this? Now you can not see the pictures, the problem is other.
I am not sure but checking your code, you are just setting a max-width to the image.
<div class="w3-content w3-section" style="max-width:600px">
That means, if the picture width is less than 600px, (500px for instance) it will display a 500px width picture.
You can try something like this
<div class="w3-content w3-section" style="width:600px">
But the best way to do so, is to have all the pictures with the same width.
I created a simple picture slideshow for my website but the problem I have is when you first go to the site it shows all the pictures and its not until you click one of the scroll arrows that it goes to a slideshow. I want it to automatically only show one picture at a time when you first open the website. Here is the code I have:
<div class="wrapper">
<h2>Gallery</h2>
<img class="mySlides" src="assets/images/chickens1.jpg">
<img class="mySlides" src="assets/images/goat1.jpg">
<img class="mySlides" src="assets/images/goat4.jpg">
<img class="mySlides" src="assets/images/goat2.jpg">
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>
JavaScript:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1; }
if (n < 1) { slideIndex = x.length; }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
It's hard to tell just from what you've posted, but what I expect is going on is that initially, all 4 images are visible, due to the CSS styling on them. Then, when a user interacts with the page, your JavaScript gets called, which makes only 1 of them visible.
One thing you might try is to set it up so they are all set to display:none to begin with, and on page load, call showDivs(1).
My Image slideshow I created in JavaScript works fine locally until I upload it online on hosted Server. I am using GoDaddy.
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, 2000);
}
<img class="mySlides" src="images/Carizmafront.jpg" alt="Carizma shop front">
<img class="mySlides" src="images/Carizmafront2.jpg" alt= "Carizma inside">
<img class="mySlides" src="images/Carizmafront3.jpg" alt= "Carizma inside">
<img class="mySlides" src="images/Carizmafront4.jpg" alt= "Carizma inside">
use full path for images (http://domain.com/dir/dir2/image.jpg) instead local path (images/Carizmafront.jpg), if works, then you have to find the correct local path
I am looking to create an HTML color visualizer for steel buildings. This will be placed on my company's website. I'm wanting to see if it is possible (in HTML) to load image layers (in their fixed positions) onto a canvas background, after a visitor clicks on a color swatch.
Here is a similar solution I am seeking.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-red";
}
.mySlides {
display: none
}
<button class="w3-button demo" onclick="currentDiv(2)">Tan Wall</button>
<button class="w3-button demo" onclick="currentDiv(3)">Red Roof</button>
<button class="w3-button demo" onclick="currentDiv(4)">Black Garage</button>
<button class="w3-button demo" onclick="currentDiv(5)">Black Trim</button>
<div class="w3-content" style="max-width:800px">
<img class="mySlides" src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Wall-Tan.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Roof-Red.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Garage-Black.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Trim-Black.png" style="width:100%">
</div>
For example, when a visitor clicks on the "Red Roof" swatch I want the "Red-Roof.png" layer to load on top of the white building canvas. The positioning would be perfect since it is positioned correctly in the image file already. From there, I'd like the customer to add more image layers such as "Tan Wall" until the building combination fits their preferences. The final image should look like this after clicking all of the buttons.
Thanks for your time!
You can achieve this by css absolute positioning.
Additionally I recommend to use .classList.toggle instead of replacing the .className:
var slideIndex = 1;
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
x[slideIndex - 1].classList.toggle("active");
dots[slideIndex - 1].classList.toggle("w3-red")
}
.mySlides {
display: none;
position:absolute;
}
.mySlides.active{
display:block;
}
<button class="w3-button demo" onclick="currentDiv(1)">Tan Wall</button>
<button class="w3-button demo" onclick="currentDiv(2)">Red Roof</button>
<button class="w3-button demo" onclick="currentDiv(3)">Black Garage</button>
<button class="w3-button demo" onclick="currentDiv(4)">Black Trim</button>
<div class="w3-content" style="max-width:800px;position: relative;">
<img src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%;position: absolute ;z-index:-1">
<img class="mySlides" src="http://metaldepotinc.com/Wall-Tan.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Roof-Red.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Garage-Black.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Trim-Black.png" style="width:100%">
</div>
EDIT:
According to the asker's comment...
Use absolute position on every image, and...
Use toggle buttons (checkbox behavior) instead of hiding all images on button click and showing only one (radio button behavior)