W3 automatic slideshow 2 on same page - javascript

I need 2 automatic slideshow on one page, but there is a problem.
I use W3 slideshow, but if i make automatic they just after one rotation or just stop show up.
Here is code.
I try to change, but i not sure what i do wrong. If you can help me.
var myIndex = 0;
carousel();
var slideId = ["mySlides1", "mySlides2"]
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides", "mySlides2");
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;}
.mySlides2 {display:none;}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>
</body>
</html>

I made some edits and now your code is working !
You don't want to use only one index, you want to use one index for each slideshow.
For each call to carousel() you will need to stop displaying the current img (n°[x|y]Index), and display the next img (n°[x|y]Index).
With this function, you can add different numbers of images in each slideshow (in my example, mySlides displays 3 images and mySlides2 has 4).
let xIndex = 0;
let yIndex = 0;
carousel();
function carousel() {
let x = document.getElementsByClassName("mySlides");
let y = document.getElementsByClassName("mySlides2");
x[xIndex].style.display = "none";
y[yIndex].style.display = "none";
xIndex = (xIndex+1)%x.length;
yIndex = (yIndex+1)%y.length;
if (xIndex > x.length)
xIndex = 1;
if (yIndex > y.length)
yIndex = 1;
x[xIndex].style.display = "block";
y[yIndex].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
<h2>Automatic Slideshow</h2>
<div style="width:150px; height:150px; overflow: hidden;">
<img class="mySlides" src="http://lorempixel.com/400/400/" style="width:100%; display: none;">
<img class="mySlides" src="http://lorempixel.com/400/200/" style="width:100%; display: none;">
<img class="mySlides" src="http://lorempixel.com/200/400/" style="width:100%; display: none;">
</div>
<h2>Automatic Slideshow</h2>
<div style="width:150px; height:150px; overflow: hidden;">
<img class="mySlides2" src="http://lorempixel.com/400/300/" style="width:100%; display: none;">
<img class="mySlides2" src="http://lorempixel.com/300/400/" style="width:100%; display: none;">
<img class="mySlides2" src="http://lorempixel.com/300/300/" style="width:100%; display: none;">
<img class="mySlides2" src="http://lorempixel.com/800/300/" style="width:100%; display: none;">
</div>

Related

HTML image slideshow shows a blank screen

I do not have much experience with html but I need to setup a image slideshow on my site. I found this bit of code on w3schools but after adding media query it shows a blank screen in between the images. How do i get rid of it and have just back to back images only? Thanks
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
#media only screen and (min-width: 480px) {
#web {
display: none;
}
}
#media only screen and (max-width: 480px) {
#mobile {
display: none;
}
}
</style>
</head>
<body>
<div class="w3-content w3-section" id="web">
<img class="mySlides" src="https://www.91-img.com/pictures/126849-v6-honor-10-mobile-phone-large-1.jpg" style="width:100%">
<img class="mySlides" src="https://static.toiimg.com/photo/64428999/Vivo-NEX.jpg" style="width:100%">
</div>
<div class="w3-content w3-section" id="mobile">
<img class="mySlides" src="https://japan-magazine.jnto.go.jp/jnto2wm/wp-content/uploads/1603_iwate_main.jpg" style="width:100%">
<img class="mySlides" src="https://image.shutterstock.com/image-photo/panoramic-view-idyllic-mountain-scenery-260nw-622792952.jpg" style="width:100%">
</div>
<script>
var myIndex = 1;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 1; 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);
}
</script>
</body>
</html>
All indexes start with 0. So change initial index in your for loop to 0 and get it work. Also you have to change classNames for your images in the mobile version (it's why you got blank pages after a few images shown) and you implemented wrong media queries.
var myIndex = 0;
carousel();
function carousel() {
var i;
if(screen.width <= 480){
var x = document.getElementsByClassName("mySlides_mobile");
}else{
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);
}
.mySlides, .mySlides_mobile {
display:none;
}
#media only screen and (max-width: 480px) {
#web {
display: none;
}
}
#media only screen and (min-width: 480px) {
#mobile {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-content w3-section" id="web">
<img class="mySlides" src="https://www.91-img.com/pictures/126849-v6-honor-10-mobile-phone-large-1.jpg" style="width:100%">
<img class="mySlides" src="https://static.toiimg.com/photo/64428999/Vivo-NEX.jpg" style="width:100%">
</div>
<div class="w3-content w3-section" id="mobile">
<img class="mySlides_mobile" src="https://japan-magazine.jnto.go.jp/jnto2wm/wp-content/uploads/1603_iwate_main.jpg" style="width:100%">
<img class="mySlides_mobile" src="https://image.shutterstock.com/image-photo/panoramic-view-idyllic-mountain-scenery-260nw-622792952.jpg" style="width:100%">
</div>
</body>
</html>

W3 slideshow implementation doesn't work correctly

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_fading
Using the link above, you can see an example of an animated fading slideshow that I am trying to implement into my website. However, when I copy the exact code and use it for me, it displays the images stacked on top of one another as one image, and just fades it in and out to the same image (made up of all of the images).
Any idea why this is happening or another source where I can get an animated slideshow from? The only other thing to take into account is that in the styles file, everything referring to 'webkit' is underlined in red. I am running in chrome though so I don't think that is the issue.
Here is the code:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-content w3-section" style="max-width:500px">
<p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p>
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_01.jpg" style="width:100%" alt="image1">
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_02.jpg" style="width:100%" alt="image2">
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_03.jpg" style="width:100%" alt="image3">
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_04.jpg" style="width:100%" alt="image4">
</div>
<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, 9000);
}
</script>
</body>
</html>
This is exactly the code on the website, and I downloaded the images they use, so why is it that I can't get it to work?
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-content w3-section" style="max-width:500px">
<p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p>
<img class="mySlides w3-animate-fading" src="img_rr_01.jpg" style="width:100%" alt="image1">
<img class="mySlides w3-animate-fading" src="img_rr_02.jpg" style="width:100%" alt="image2">
<img class="mySlides w3-animate-fading" src="img_rr_03.jpg" style="width:100%" alt="image3">
<img class="mySlides w3-animate-fading" src="img_rr_04.jpg" style="width:100%" alt="image4">
</div>
<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, 9000);
}
</script>
</body>
</html>
Here its working correctly. It may me something else that would be causing some problem.

Manual and Automatic Slideshow

I have to make a slideshow that has to work both automatic and manual.
For the manual part I have two buttons: next and previous that allows me to see the photos without having to wait a certain period of time between images.
When I don't click on the buttons, the slideshow goes automatic and the images change after ten seconds (for example).
My problem is that, after I click on the previous/ next button, the images start to appear faster or they appear more than one on the screen.
Here is the code I am working with:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xPeke</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="images/favicon-16x16.png" sizes="16x16" type="image/png">
</head>
<body>
<!-- PROGRAM BAR -->
<div id="program" class="topbar">
<b style="color:black;">Program:</b> Luni-Vineri: 9:00-22:00 Sambata: 9:00–20:00 Duminica: Inchis
<div class="topbar2">
Login <span> / </span> Register
</div>
</div>
<br>
<div class="slideshow-container">
<div class="wall">
<img class="mySlides" src="images/logo1.png" alt="Logo1" width="1500" height="300">
<img class="mySlides" src="images/logo2.png" alt="Logo2" width="1500" height="300">
<img class="mySlides" src="images/logo3.png" alt="Logo3" width="1500" height="300">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a><br>
</div></div>
<form>
<img class="generalone" src="images/logo.png" alt="Logo" width="180" height="45">
<input class="search" type="text" name="search" placeholder="Search..">
</form>
<div class="generaltwo">
<img class="socialmedia" src="images/facebook.png" alt="Facebook">
<img class="socialmedia" src="images/youtube.png" alt="Youtube">
<img class="socialmedia" src="images/reddit.png" alt="Reddit">
</div>
<script>
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n==undefined){n = ++slideIndex}
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
timer = setTimeout(showSlides, 10000);
}
// clear Timeout(timer);
</script>
</body>
</html>

How to make a javascript slider that slides automatically

I'm trying to create a slider for my html page,
I found this slider in css/javascript, everything is working properly, but how can I make the slide sliding automatically too instead of sliding only when the user press the arrows ?
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-white", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-white";
setTimeout(2000); // Change image every 2 seconds
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {
display: none
}
.w3-left,
.w3-right,
.w3-badge {
cursor: pointer
}
.w3-badge {
height: 13px;
width: 13px;
padding: 0
}
</style>
<body>
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%">
<div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
</script>
</body>
</html>
Hi here i just implemented the logic to slide the images frequently..
try this
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body>
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" alt="sample test1" src="mfdg2.jpg" style="width:100%">
<img class="mySlides" alt="sample test2" src="img2.jpg" style="width:100%">
<img class="mySlides" alt="sample test3" src="img1.jpg" style="width:100%">
</div>
<script>
showDivs(1);
function plusDivs(n) {
n=n+1;
showDivs(n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {n = 1}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[n-1].style.display = "block";
setTimeout(function() { //calls click event after a certain time
plusDivs(n);
}, 2000);
}
</script>
</body>
</html>
Its working for me..
In your case setInterval() should be global.
setInterval(function(){
slideIndex = slideIndex +1;
showDivs(slideIndex)
}, 2000);
https://jsfiddle.net/g9a2ez4s/
use setInterval
setInterval(function(){
document.getElementsByClassName("w3-left").click();
}, 800);

how to show Image slider for long time

I am trying to show the image slider for long time where I already used timeout for every image to display.
But now I want to image slider in this case also:
1.The system should not go the sleep mode if we are not using the system, it
should show the image slider until I close the browser.
2.The system should not go to the screensaver mode, it should show the image
slider until I close the browser.
code:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mySlides
{
display:none;
}
</style>
<body>
<h2 class="w3-center"></h2>
<div class="w3-content w3-section" style=""width='962px';height='565px';frameborder='0'"">
<img class="mySlides" src="Chrysanthemum.jpg" style="width='100%">
<img class="mySlides" src="Desert.jpg" style="width:100%">
<img class="mySlides" src="Hydrangeas.jpg" style="width:100%">
</div>
<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, 2000);
}
</script>
</body>
</html>

Categories

Resources