what im trying to do is to make my slideshow do some animation while changing photos, i have the very basic slide show
<div class="slider-wrapper">
<div class="slider-wrapper-item " style="background-image: url(/wp-content/themes/ETL/img/slider-image-1.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-2.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-3.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-4.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-5.jpg);"></div>
<div class="slider-play-icon"><img src="/wp-content/themes/ETL/img/play-arrow-grey.png"></div>
this is the js
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slider-wrapper-item");
console.log("slides",slides);
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, 5000); // Change image every 2 seconds
}
</script>
i have found an article on how to make the fade animation but its complicated and i have no luck with it https://cobwwweb.com/simple-looping-crossfade-image-slideshow
this is the exact animation i want.
if you want animation you can't use display none or block because display property does not support transition.
don't use this
slides[i].style.display = "none" and slides[slideIndex-1].style.display = "block";
instead of that make class for animation and add that class and remove whenever you want.
for example
.addAnimation{
// write your code here
}
.removeAnimation{
// write your code here
}
Related
My website has a simple slide carousel which works correctly, but the SEOptimer evaluation report says:
“Cannot read property 'className' of undefined at showSlides (http://www.abacus-arts.org.uk/:78:8) ”
Line 78 is near the end below and says: dots[slideIndex-1].className += " active";
Can I safely ignore the SEOptimer problem report, or can you help me to fix it?
<div>
<!-- code for slides 1 to 4 removed, below are slides 5 and 6 in the carousell -->
<div class="mySlides">
<div class="picnumber"> 5 / 6</div> <img src="Pic-5-DM.jpg" alt="Pic5" style="width:100%";>
<div class="pictitle"> Breakout room LHS view </div> </div>
<div class="mySlides">
<div class="picnumber"> 6 / 6</div> <img src="Pic-6-GW.jpg" alt="Pic6" style="width:100%";>
<div class="pictitle"> Street view of entrance </div> </div>
<!-- Back and forward buttons jump to the Java Script lower down -->
<a class="prev" onclick="plusSlides(-1)"> <</a>
<a class="next" onclick="plusSlides(1)"> ></a>
</div>
<!-- from https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp -->
<script>
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("demo");
// var captionText = document.getElementById("caption");
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";
// captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
UPDATE. Solved by removing the lines for unused variables as shown //.
#phuzi Thank you all for encouraging me to search for unused variables, I found in evolving the HTML I has stopped using "demo, dots and captiontext" and the problem went away when these code lines were excluded.
Many thanks. Graeme.
var dots = document.getElementsByClassName("demo");
there is null, it mean - i dont find any classes with name "demo"
check html part code
Hi to everyone I found a slider in w3schools.com and I already implement it; You can see it here. The w3schools tutorial has the script to add the autoplay but in this case, is one or another script. ¿Is there a way to use it with arrows and autoplay?
This is the only arrows script:
<script>
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 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";
}
</script>
THANKS
You can do this with the code below. I have added a stop button so you can see how to stop the autoplaying as well.
N.B. I've added an id to your next button so there's no confusion about which element to click. Using class names isn't advisable if you might want to use .next elsewhere.
The code is fully commented.
Let me know if you wanted anything else.
// Start autoplaying automatically
var autoplayInterval = setInterval(function() {
// Get element via id and click next
document.getElementById("next").click();
}, 1000); // Do this every 1 second, increase this!
// Stop function added to button
function stopAutoplay() {
// Stop the autoplay
clearInterval(autoplayInterval);
}
var slideIndex = 1;
showSlides(slideIndex);
// Start autoplaying automatically
var autoplayInterval = setInterval(function() {
// Get element via id and click next
document.getElementById("next").click();
}, 1000); // Do this every 1 second, increase this!
// Stop function added to button
function stopAutoplay() {
// Stop the autoplay
clearInterval(autoplayInterval);
}
// 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 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";
}
<body data-new-gr-c-s-check-loaded="14.991.0" data-gr-ext-installed="">
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade" style="display: block;">
<div class="numbertext">1 / 3</div>
<img src="https://acrip.co/wp-content/uploads/2021/01/banner-panel-enero-19.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">2 / 3</div>
<img src="https://acrip.co/wp-content/uploads/2021/01/banner-webinar-soluciones-20-3.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">3 / 3</div>
<img src="https://acrip.co/wp-content/uploads/2020/12/slider_3-kactus.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a id="next" class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot active" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<br>
<button id="stopAutoplayButton" onclick="stopAutoplay();">Stop</button>
</body>
I know it has something to do with setInterval, but I can't seem to figure it out. I don't know a lot about JS, and I found this slider code on the internet :) I'm still struggling with JS a lot.
HTML:
<article class="slideshow-container">
<div class="mySlides">
<div class="quote-container">
<h5 class="quote-titel">Titel text</h5>
<p>Quote text</p>
</div>
</div>
<div class="mySlides">
<div class="quote-container">
<h5 class="quote-titel">Titel text</h5>
<p>Quote text</p>
</div>
</div>
</article>
<article class="dot-container">
<div class="nav-container">
<a class="prev" onclick="plusSlides(-1)"><img src="./img/svg/arrow-left.svg"></a></div>
<div class="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>
<div class="nav-container">
<a class="next" onclick="plusSlides(1)"><img src="./img/svg/arrow-right.svg"></a>
</div>
</article>
JS:
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";
}
Thanks in advance!
You almost there,
changeSlideInterval = setInterval(()=>plusSlides(1),5000)
//when you dont need it do not forget to destroy it
clearInterval(changeSlideInterval)
Here is a working example: https://jsfiddle.net/er28zt71/6/
Addition to that,
It was too hard to understand the problem here because you did not share a wroking code, for this kind of questions you could use https://jsfiddle.net/ (I have to google your code and find it was an example of w3schools)
Even setInterval is beautiful, if you forget to destroy them they gladly consume your resources, so check out how setInterval and setTimeout works and how you should use them https://javascript.info/settimeout-setinterval
I have used the arrow function above. when you are passing functions as parameters you should know how normal functions and arrow functions make difference. so check out them and how context works in javascript. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
Use setInterval this way to traverse over your elements.
On clicking Prev/Next make sure you cancel out the auto-sliding by using clearInterval
const interval = setInterval(() => {
if (userInterrupt) {
clearInterval(interval);
return;
}
plusSlides(1);
}, 5000);
Complete example: https://jsfiddle.net/3ou6kn4q/1/
So I'm trying to learn JavaScript but in the mean time I'm manipulating other's code, such as w3school's. I thought I could manage this but am struggling.
I'm trying to remove anything to do with the dot, numbering and caption from this script. I can work through process of elimination but I'd rather not end up with some messy script.
This is a link to the complete code https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
Thank you in advance..
<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++) {
}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 4000); // Change image every 2 seconds
}
</script>
Its not that hard :)
Here you have it:
<div class="slideshow-container">
<div class="mySlides fade">
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
</div>
<br>
<script>
var slideIndex = 0;
showSlides();
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
}
</script>
Furthermore you might want to remove the unnecesary css classes.
I'm having some issues with a slideshow banner for the top of my webpage. I tried following the W3 tutorial on it but not having much luck. So, below is my code:
HTML:
<div class="slide-content" style="max-width:1000px"> <img class="slidepic" src="testheadphoto.jpg" style="width:100%" border="0" /> <img class="slidepic" src="testphototwo.jpg" style="width:100%" border="0" />
<div class="slide-center slide-section slide-large slide-text-white slide-display-bottommiddle" style="width:100%">
<div class="slide-left slide-padding-left slide-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="slide-right slide-padding-right slide-hover-text-khaki" onclick="plusDivs(-1)">❯</div>
<span class="slide-stamp demo slide-border slide-transparent slide-hover-white" _="_" span="span"> <span class="slide-stamp demo slide-border slide-transparent slide-hover-white" onclick="currentDiv(1)"></span> <span class="slide-stamp demo slide-border slide-transparent slide-hover-white" onclick="currentDiv(2)"></span> </span> </div>
CSS:
.slide {
display:none;
}
.slide-left, .slide-right, .slide-stamp {
cursor: pointer;
}
.slide-stamp {
height: 13px;
width: 13px;
padding: 0;
}
Javascript:
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("slidepic");
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(" slide-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " slide-white";
}
At the moment, the two images are both appearing on the page at the same time and the arrows for right and left are below them. When you click an arrow, one of the pictures disappears and the slide effectively does work. It doesn't look how it's supposed to though. I've attached two images (One of how the slide should look and the other, how mine looks. As always, any help is much appreciated!
Thanks
Your images are line breaking because the container is not setup right.
In your CSS, try:
.slide-content {
white-space: nowrap;
}
I also recommend putting your controls into this same container and positioning them absolutely to their respective corners, with a z-index set to ensure they'll be on top of the images that are sliding in.