I'm trying to make autoslide images. I've searched but haven't found a solution that can help me.
I have var slideImages to keep all the images and set setInterval but my images still don't move.
Maybe there is something that I'm missing. Some advice would be much appreciated, thank you.
Please take a look at my code (When i posted my code here i don't know why my images didn't show just only one image)
// slideshow
let slideImages = document.getElementsByClassName("slide");
let i = 0;
function showImages() {
for (i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
}
};
function slideshow() {
if (i < slideImages.length - 1) {
i++;
}
else {
i = 0;
}
}
setInterval(slideshow(), 2000);
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontent">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontent">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontent">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index2.js"></script>
</body>
</html>
Here's the Demo
let is EcmaScript6, i change using var.
Html
// Nothing change...
Js
// slideshow
var slideImages = document.getElementsByClassName("slide");
var counter = 0; //set index for timer
var duration = 2000; //set duration
//Hide each slide at first
function hideAllImages() {
for (var i = 0; i < slideImages.length; i = i + 1) {
/* console.log(slideImages[i]); */
slideImages[i].style.opacity = 0;
}
}
function slideshow() {
hideAllImages();
/* go to next slide */
counter = counter + 1;
/* reset to first slide when looping */
if (counter > slideImages.length - 1) {
counter = 0;
}
console.log(counter);
/* show the current slide */
slideImages[counter].style.opacity = 1;
}
setInterval(function() {
slideshow();
}, duration);
Css
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
transition: opacity 300ms;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
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, 2000); // Change image every 2 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://preview.ibb.co/mV3TR7/1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://preview.ibb.co/bSCBeS/2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://preview.ibb.co/kgG9Yn/3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</body>
</html>
You can refer the following link for the solution.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
You can use javascript, but I would suggest using bootstrap to do this. I suffered while trying to make this work on my website and I would highly suggest using bootstrap because of its ease of use and if something goes wrong with it, it is a lot easier to fix. I recommend the w3schools article that was mentioned in the comments. https://www.w3schools.com/bootstrap/bootstrap_carousel.asp . If you do continue to want to use JS I wish you all the best :)
Related
I built a JS slideshow with clickable indicators. I would like for my slideshow to play automatically, while maintaining the functionality of the indicator buttons.
In the code example below, I attempted to add a setTimeout() method to change the image every 2000ms, but it seems to not be working. What would be the best approach to change the JS so I have some automation? I also attempted to use the setInterval method with no luck. I will provide the code below:
Thank you in advance for the help/tips/and advice
var editorialSlideIndex = 1;
showEditorialSlides(editorialSlideIndex);
//Next/previous controls
function plusSlides(n) {
showEditorialSlides(editorialSlideIndex += n);
}
//Thumbnail image controls
function currentSlide(n) {
showEditorialSlides(editorialSlideIndex = n);
}
function showEditorialSlides(n) {
var i;
var slides = document.getElementsByClassName("editorial-slideshow");
var slideDotInd = document.getElementsByClassName("slideDotInd");
if (n > slides.length) {
editorialSlideIndex = 1
}
if (n < 1) {
editorialSlideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slideDotInd.length; i++) {
slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", "");
}
slides[editorialSlideIndex - 1].style.display = "block";
slideDotInd[editorialSlideIndex - 1].className += " active-slider";
setTimeout(showEditorialSlides, 2000); // Change image every 2 seconds
}
/*Slideshow Container */
.editorial-slideshow-container {
padding-top: 15px;
position: relative;
margin: auto;
}
/*Default Hide Images*/
.editorial-slideshow {
display: none;
}
/*Next and previous buttons*/
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -34px;
padding: 10px;
color: white;
font-weight: bold;
font-size: 34px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0, 128, 115, .5);
}
/* Position "next button" */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, background color */
.prev:hover,
.next:hover {
background-color: rgba(0, 128, 115, .8);
}
/* Caption text
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
Number text (1/3 etc)
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 15;
}
*/
/* The slideslideDotInd/bullets/indicators */
.slideDotInd {
cursor: pointer;
height: 15px;
width: 15px;
margin: 15px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active-slider,
.slideDotInd:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: .25s;
}
#-webkit-keyframes fade {
from {
opacity: .8
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .8
}
to {
opacity: 1
}
}
#media only screen and (max-width: 425px) {
#CGConainer .banner-title H1 {
line-height: 50px;
}
}
#media only screen and (min-width: 768px) {
.editorial-slideshow-container {
width: 75%;
/*Max width is 576px*/
}
}
#media only screen and (min-width: 1024px) {
.editorial-slideshow-container {
width: 50%;
}
}
<div class="editorial-slideshow-container">
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-1.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-2.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-3.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-4a.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-5a.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-6.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-7.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-8.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-9.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-10.jpg" style="width:100%">
</div>
<p class="prev" onclick="plusSlides(-1)">‹</p>
<p class="next" onclick="plusSlides(1)">›</p>
</div>
<div style="text-align:center">
<span class="slideDotInd" onclick="currentSlide(1)"></span>
<span class="slideDotInd" onclick="currentSlide(2)"></span>
<span class="slideDotInd" onclick="currentSlide(3)"></span>
<span class="slideDotInd" onclick="currentSlide(4)"></span>
<span class="slideDotInd" onclick="currentSlide(5)"></span>
<span class="slideDotInd" onclick="currentSlide(6)"></span>
<span class="slideDotInd" onclick="currentSlide(7)"></span>
<span class="slideDotInd" onclick="currentSlide(8)"></span>
<span class="slideDotInd" onclick="currentSlide(9)"></span>
<span class="slideDotInd" onclick="currentSlide(10)"></span>
</div>
It's such a small change.
The way you called setTimeout is wrong.
function showEditorialSlides(n) {
var i;
var slides = document.getElementsByClassName("editorial-slideshow");
var slideDotInd = document.getElementsByClassName("slideDotInd");
if (n > slides.length) {
editorialSlideIndex = 1
}
if (n < 1) {
editorialSlideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slideDotInd.length; i++) {
slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", "");
}
slides[editorialSlideIndex - 1].style.display = "block";
slideDotInd[editorialSlideIndex - 1].className += " active-slider";
setTimeout(() => showEditorialSlides(editorialSlideIndex = (n+1)), 2000); // Change image every 2 seconds
}
And that was the reason your function was being called incorrectly.
EDIT: I forgot to mention the reason. There was no way JavaScript knew what parameters you were passing to the function when you're trying to recurse.
You can try it out in the fiddle
I want to move the slide when I press the button on the slide. But I can not.
Changing the button's css to active was successful, but when I pressed the button, it continued to fail to move the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0; padding: 0;}
li{list-style: none;}
.dots{width:20px; height: 20px; border-radius: 50%; background-color: #124412;}
.active{width:20px; height: 20px; border-radius: 50%;background-color: #fff;}
#slide{}
#slide ul
#slide ul li{}
.container{width: 900px; margin: 0 auto;}
</style>
</head>
<body>
<div id="slide_wrap">
<div class="container">
<div id="slide">
<ul>
<li><img src="slideimg/1.jpg" alt="1"></li>
<li><img src="slideimg/2.jpg" alt="2"></li>
<li><img src="slideimg/3.jpg" alt="3"></li>
<li><img src="slideimg/4.jpg" alt="4"></li>
<li><img src="slideimg/5.jpg" alt="5"></li>
</ul>
</div>
<div id="dot">
</div>
<div id="arrow">
<div id="left-arrow">left</div>
<div id="right-arrow">right</div>
</div>
</div>
</div>
<script>
var width = 640;
var height = 480;
var length = document.querySelectorAll('#slide li').length;
var slide = document.querySelector('#slide');
var slideUl = document.querySelector('#slide ul');
var slideLi = document.querySelectorAll('#slide li');
slide.style.width = width + "px";
slide.style.height = height + "px";
slide.style.overflow = "hidden";
slideUl.style.width = width*length +"px";
for(var i=0; i < slideLi.length; i++){
var item = slideLi.item(i);
item.style.width = width + "px";
item.style.height = height + "px";
item.style.cssFloat = "left";
}
var dot = document.getElementById('dot');
for(var i = 0; i < slideLi.length; i++){
var btn = document.createElement('button');
btn.classList.add('dots');
dot.appendChild(btn);
//btn.setAttribute('onclick','moveTo('+i+')');
}
var dots = document.querySelectorAll('.dots');
function moveTo(index){
index = index || 0;
index = index % length;
slideUl.style.marginLeft = "-"+width*index+"px";
for(var i = index ; i < dots.length ; i++){
for(var j = 0; j < dots.length ; j++){
if(dots[j].classList.contains('active')){
dots[j].classList.remove('active');
}
}
dots[index].classList.add('active');
}
}
for(var i = 0 ; i < dots.length ; i++){
dots[i].addEventListener('click', function(e){
for(var j = 0 ; j < dots.length ; j++){
if(dots[j].classList.contains('active')){
dots[j].classList.remove('active');
}
e.target.classList.add('active').moveTo(i);
}
})
}
var index = 0;
//left
function slideLeft(){
slideUl.style.marginLeft = "-"+width*(index-1)+"px";
index--;
}
//left click
var arrowLeft = document.getElementById('left-arrow');
arrowLeft.addEventListener('click', function(){
console.log(index)
if(index === 0){
index = slideLi.length;
}
slideLeft();
});
//right
function slideRight(){
slideUl.style.marginLeft = "-"+width*index+"px";
index++;
}
//right click
var arrowLeft = document.getElementById('right-arrow');
arrowLeft.addEventListener('click', function(){
console.log(index)
if(index === length){
index = 0;
}
slideRight();
});
var currentIndex = 0;
setInterval(function(){
currentIndex += 1;
moveTo(currentIndex)
},1000 * 1.5);
moveTo(0)
</script>
</body>
</html>
Slider
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Get More : https://www.w3schools.com/howto/howto_js_slideshow.asp
I have managed in the past to add 3 vertical dots to a slideshow I created using Position absolute and moving them into position that way. then using Javascript to cycle the active class during the animation. The problem I ran into is that the dots would shrink inside of each other on resizing down to smaller screen resolutions.
Im really just curious if there is a better way to do this (ideally just in CSS3 but not against using JavaScript as well). Right now my slideshow
Github page: https://tsukiyonocm.github.io/Portfolio-Photography-Website/
I am currently messing with trying to add the dots using a UL/LI setup, but I am not sure it will react much different then it did the other way. Anyone able to offer me any input?
I would prefer this to be done with Vanilla CSS/JS as of now.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
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, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
Using CSS transform: rotate(); may achieve the effect you desire.
By adding transform: rotate(90deg); to the dot container in your code, it rotates to the vertical.
I am trying to have more than one function start automatically on page load. However, I can only get the first function to work, while the second is ignored. I have two slideshows (adapted from w3schools) that do not automatically load the first image slide, and only display an image after clicking on the arrows to change to the next slide, then they display properly. However I want both of these slideshows to automatically display their first slide right as the page loads. Here's what I've got, and what I've tried:
(Go easy on me, I'm a JavaScript novice)
var slideIndex = 1;
var slideIndex2 = 1;
showSlides(slideIndex);
showSlides2(slideIndex2);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function plusSlides2(m) {
showSlides2(slideIndex2 += m);
}
function currentSlide2(m) {
showSlides2(slideIndex2 = m);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
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";
};
function showSlides2(m) {
var j;
var slides2 = document.getElementsByClassName("mySlides2");
if (m > slides2.length) {
slideIndex2 = 1
};
if (m < 1) {
slideIndex2 = slides2.length
};
for (j = 0; j < slides2.length; j++) {
slides2[j].style.display = "none";
};
slides2[slideIndex2 - 1].style.display = "block";
};
function start() {
showSlides(1);
showSlides2(1);
};
/* Slideshow Styles
Adapted from:
https://www.w3schools.com/howto/howto_js_slideshow.asp */
* {
box-sizing: border-box
}
/* Slideshow container */
.slideshow-container {
display: block;
float: left;
max-width: 1000px;
height: 450px;
min-width: 425px;
position: relative;
margin: 0px 15px 0px 0px;
width: 60%;
}
.mySlides,
.mySlides2 {
height: 450px;
line-height: 450px;
margin: auto !important;
text-align: center !important;
display: none;
width: 99% !important;
}
.mySlides img,
.mySlides2 img {
/*margin: auto;*/
max-height: 450px;
max-width: 425px;
height: auto;
width: auto;
}
/* Next & previous buttons */
.slprev,
.slnext {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.slnext {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
<html>
<body onload="start();">
<header></header>
<section>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 12 </div>
<img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-21.jpg" />
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 12 </div>
<img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg" />
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 12 </div>
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg" />
</div>
<!-- And so on -->
<div class="slideshow-arrows">
<a class="slprev" onClick="plusSlides(-1)">❰</a>
<a class="slnext" onClick="plusSlides(1)">❱</a>
</div>
</div>
<div class="slideshow-container">
<div class="mySlides2 fade">
<div class="numbertext">1 / 9 </div>
<img src="http://cdn3-www.cattime.com/assets/uploads/2011/08/best-kitten-names-1.jpg" />
</div>
<div class="mySlides2 fade">
<div class="numbertext">2 / 9 </div>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" />
</div>
<div class="mySlides2 fade">
<div class="numbertext">3 / 9 </div>
<img src="http://leecamp.net/wp-content/uploads/kitten-3.jpg" />
</div>
<!-- And so on -->
<div class="slideshow-arrows">
<a class="slprev" onClick="plusSlides2(-1)">❰</a>
<a class="slnext" onClick="plusSlides2(1)">❱</a>
</div>
</div>
</section>
</body>
</html>
As you can see, I just copied the original JavaScript from w3schools and changed all the variables to new ones for the second one. I'm sure there is a way better way of doing that, but at least it does work. Now, To fix the problem of the first slide not showing up automatically, I originally added to my body:
<body onload="showSlides(1);">
Works perfect to display my first slide on load. It also works to automatically display the first slide on my second slideshow with this:
<body onload="showSlides2(1);">
However It only loads the first when I try:
<body onload="showSlides(1);showSlides2(1);">
So no good. This is where I scoured the internet for solutions. I saw this one on here about combining them into a different function. That's when I switched to making a JavaScript function called "start" to use both of my functions and changed the onload to :
function start() {
showSlides(1);
showSlides2(1);
};
Still only loads the first. So I switched their order (putting showSlide2(1); first) and then the second one would load, and the first one wouldn't.
So I searched for another method and came across examples of using "addEventListener" to accomplish this. However, trying to use that causes neither to load - and I'm guessing it's because I don't know how to properly use it. I removed the start function, and added the "addEventListener" before the "showSlides" and "showSlides2" functions:
document.addEventListener("load", showSlides);
document.addEventListener("load", showSlides2);
I also tried it including the 1 - such as document.addEventListener("load", showSlides(1)); - but that did nothing either. I'm hoping it's as simple as fixing the syntax, but I just can't seem to figure it out myself.
So here's the question: How do I get both functions to occur on page load?
If it matters, I'm using Firefox 51.0.1 and Chrome 56.0.2924.87 to test it, same results for both. Thank you for your time.
Substitute attaching DOMContentLoaded event to document for load at call to .addEventListener().
Perform action within event handler, instead of document.addEventListener("load", showSlides(1));, which calls showSlides() immediately.
Also, include DOCTYPE declaration at html document.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box
}
/* Slideshow container */
.slideshow-container {
display: block;
float: left;
max-width: 1000px;
height: 450px;
min-width: 425px;
position: relative;
margin: 0px 15px 0px 0px;
width: 60%;
}
.mySlides,
.mySlides2 {
height: 450px;
line-height: 450px;
margin: auto !important;
text-align: center !important;
display: none;
width: 99% !important;
}
.mySlides img,
.mySlides2 img {
/*margin: auto;*/
max-height: 450px;
max-width: 425px;
height: auto;
width: auto;
}
/* Next & previous buttons */
.slprev,
.slnext {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.slnext {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
</style>
<script>
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function plusSlides2(m) {
showSlides2(slideIndex2 += m);
}
function currentSlide2(m) {
showSlides2(slideIndex2 = m);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
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";
};
function showSlides2(m) {
var j;
var slides2 = document.getElementsByClassName("mySlides2");
if (m > slides2.length) {
slideIndex2 = 1
};
if (m < 1) {
slideIndex2 = slides2.length
};
for (j = 0; j < slides2.length; j++) {
slides2[j].style.display = "none";
};
slides2[slideIndex2 - 1].style.display = "block";
};
var slideIndex = 1;
var slideIndex2 = 1;
document.addEventListener("DOMContentLoaded", function() {
console.log("first DOMContentLoaded event");
showSlides(slideIndex);
});
document.addEventListener("DOMContentLoaded", function() {
console.log("second DOMContentLoaded event");
showSlides2(slideIndex2);
});
</script>
</head>
<body>
<header></header>
<section>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 12 </div>
<img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-21.jpg" />
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 12 </div>
<img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg" />
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 12 </div>
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg" />
</div>
<!-- And so on -->
<div class="slideshow-arrows">
<a class="slprev" onClick="plusSlides(-1)">❰</a>
<a class="slnext" onClick="plusSlides(1)">❱</a>
</div>
</div>
<div class="slideshow-container">
<div class="mySlides2 fade">
<div class="numbertext">1 / 9 </div>
<img src="http://cdn3-www.cattime.com/assets/uploads/2011/08/best-kitten-names-1.jpg" />
</div>
<div class="mySlides2 fade">
<div class="numbertext">2 / 9 </div>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" />
</div>
<div class="mySlides2 fade">
<div class="numbertext">3 / 9 </div>
<img src="http://leecamp.net/wp-content/uploads/kitten-3.jpg" />
</div>
<!-- And so on -->
<div class="slideshow-arrows">
<a class="slprev" onClick="plusSlides2(-1)">❰</a>
<a class="slnext" onClick="plusSlides2(1)">❱</a>
</div>
</div>
</section>
</body>
</html>
I made a slider with seven pictures and next and previous buttons. The slider works automatically and when hovering the slider the loop stops.
I've tried to add interactive bullets - now wrote in static HTML - that respond to their given picture.
The bullets should be as many as there are slides, but without having to add them myself one by one.
But I don't know how to do it. Can anyone help?
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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", "");
}
if (slides.length > 0) {
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
}
$(document).ready(function() {
var interval = setInterval(function() {
var $curr = $('.mySlides:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 5000);
$('.mySlides').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(function() {
var $curr = $('.mySlides:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 5000);
});
});
/* SLIDER*/
#containermio {
width: 100%;
margin: 0 auto;
overflow: hidden;
height: 536px;
position: relative;
}
#containermio a:hover {
color: white;
}
#containermio ul {
margin: 0px;
padding: 0px;
width: 100%;
list-style: none;
height: 100%;
position: absolute;
}
#containermio ul li {
height: 100%;
display: none;
position: relative;
}
#containermio ul li:first-child {
display: block;
}
#containermio ul li img {
width: 100%;
min-height: 100%;
}
/* FADE */
.mySlides {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* SLIDE TITLE*/
.text {
margin: 0;
padding: 20px 0 0 25px;
font-size: 40px;
font-weight: 600;
color: #f7f7f7;
text-align: center;
position: absolute;
font-family: 'Montserrat', sans-serif;
}
/* ARROWS */
.prev, .next {
z-index: 99;
cursor: pointer;
position: absolute;
display: block;
top: 40%;
width: auto;
color: #fff;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
padding: 25px 25px 25px 25px;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
text-decoration: none;
}
/* DOTS */
.dotdiv {
bottom: 10px;
position: absolute;
width: 100%;
text-align: center;
z-index: 99;
}
.dot {
cursor:pointer;
height: 6px;
width: 6px;
margin: 0 2px;
background-color: #eee;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
z-index: 99;
}
.active, .dot:hover {
background-color: #717171;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="containermio">
<ul id="slidermio">
<li class="mySlides">
<div id="slide1" class="text">alicè</div>
<img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"/>
</li>
<li class="mySlides">
<div id="slide2" class="text">halo halo</div>
<img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"/>
</li>
<li class="mySlides">
<div id="slide3" class="text">tilt</div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
</li>
<li class="mySlides">
<div id="slide4" class="text">artist unknown</div>
<img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"/>
</li>
<li class="mySlides">
<div id="slide5" class="text">insa</div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
</li>
<li class="mySlides">
<div id="slide6" class="text">blue lights</div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
</li>
<li class="mySlides">
<div id="slide7" class="text">outdoor festival</div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
</li>
</ul>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dotdiv">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
</div>
</div>
jsfiddle: https://jsfiddle.net/e9m3yupp/ (original: https://jsfiddle.net/hctxgqhx/)
I changed a lot in your code, in order to make it much more flexible and concise.
There are too many changes to explain every single one, so I used comments in the code snippet below instead, to explain what every line does.
But I will sum up the most major changes:
I put all the slides in an array. In that array, every slide is represented by an object containing a txt and an img property. The first index of the array ([0]) is used to store the slide-index.
I removed the <ul> with all the <li>s from the HTML, and replaced them with one <div>. And instead of switching elements, I change the source of the image.
This way, you don't have to add new slides to your HTML, all you have to do is add a slide-object to the slides-array in JS.
I moved the onclick handlers (for the arrows and bullets/dots) from HTML to JS. It's considered good practice to keep all JS-code outside of your HTML.
Don't pay too much attention to all the 'changes' in the CSS. Mostly, those are just me reordering and reformatting things for my own readability, but I'll admit it's an acquired taste:)
There might be however a few actual changes that are critical for proper layout/functionality, but like I said I changed so much that I don't even remember.
Unfortunately, I couldn't get the CSS fade animation (see code block below) to work with the new code. Because now there is only one element for all slides, switching the source instead of the elements, the animation doesn't fire anymore. I tried a lot of things, but with no success.
/* FADE */
.slide {-webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s;}
#-webkit-keyframes fade {from {opacity:.4} to {opacity:1}}
#keyframes fade {from {opacity:.4} to {opacity:1}}
So I had to move that animation to JS, using jQuery:
$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);});
If you really want to do the animation with CSS, you could use similar code as I used to create the bullets/dots (see code snippet), to also create an <li> for every slide in the array. But that will crowd your webpage with a whole lot of elements the more slides you add... not sure which option is better.
Code Snippet:
$(document).ready(function() {
var interval;
var slides = [
1,
{txt:"alicè", img:"http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"},
{txt:"halo halo", img:"http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"},
{txt:"tilt", img:"http://kenwheeler.github.io/slick/img/fonz1.png"},
{txt:"artist unknown", img:"http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"},
{txt:"insa", img:"http://kenwheeler.github.io/slick/img/fonz2.png"},
{txt:"blue lights", img:"http://kenwheeler.github.io/slick/img/fonz3.png"},
{txt:"outdoor festival", img:"http://kenwheeler.github.io/slick/img/fonz3.png"}
];
/* SLIDE INTERVAL*/
function startSlideInterval(){interval = setInterval(function(){$(".next").click();},5000);} //trigger the next-button on every interval
$('.slide').hover(function(){clearInterval(interval);},startSlideInterval); //clear interval on 'hover', restart interval on 'unhover'
/* SHOW SLIDE */
function showSlide(n) {
if (n>slides.length-1) {n=1;} else if (n<1) {n=slides.length-1;} //loop around to first/last slide
$(".slide img").attr("src",slides[n].img); //change image
$(".slide div").html(slides[n].txt); //change text
$(".bullets span:nth-child("+slides[0]+")").removeClass("active"); //deactivate old bullet
$(".bullets span:nth-child("+n+")").addClass("active"); //activate new bullet
$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);}); //fade new slide
slides[0] = n; //set slide-index to new value
}
/* ARROWS */
$(".prev").click(function(){showSlide(slides[0]-1);}); //click-handler
$(".next").click(function(){showSlide(slides[0]+1);}); //click-handler
/* BULLETS */
(function(){
var bullets = "";
for (var i=1,count=slides.length; i<count; ++i) {bullets += "<span></span>"} //add a bullet for every slide in the array
$(".bullets").append(bullets); //append bullets to their container
$(".bullets span").click(function(){showSlide($(this).index()+1);}); //click-handler
})();
/* INITIALIZE */
showSlide(slides[0]); //show the first slide
startSlideInterval(); //start slide-interval
});
html {width:95%; height:90%;} /*ONLY FOR CODE SNIPPET*/
body {width:100%; height:100%;}
/* SLIDER */
#slider {position:relative; width:90%; height:80%; margin:0 auto; background-color:grey; overflow:hidden;}
#slider .slide {width:100%; height:100%; text-align:center;}
#slider .slide img {width:auto; height:100%;}
#slider .slide div {position:absolute; left:0; top:0; margin:0; padding:20px 0 0 25px; text-align:center; font-family:'Montserrat',sans-serif; font-size:40px; font-weight:600; color:#f7f7f7;}
/* ARROWS */
#slider a {
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: auto;
padding: 25px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 1;
transition: background-color 0.6s ease;
}
#slider a:hover {background-color:rgba(0,0,0,0.8);}
#slider a.prev {left:0; border-radius:0 3px 3px 0;}
#slider a.next {right:0; border-radius:3px 0 0 3px;}
/* BULLETS */
.bullets {position:absolute; bottom:10px; width:100%; text-align:center; z-index:1;}
.bullets span {
display: inline-block;
width: 6px;
height: 6px;
margin: 0 2px;
border-radius: 50%;
background-color: #eee;
cursor:pointer;
transition: background-color 0.6s ease;
}
.bullets span:hover, .bullets span.active {background-color:#717171;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="slider">
<div class="slide"><img src="" /><div></div></div>
<a class="prev">❮</a><a class="next">❯</a>
<div class="bullets"></div>
</div>
jsfiddle: https://jsfiddle.net/hctxgqhx/16/