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.
Related
why wouldn't this work? I am trying to make it so when you click on the video/div that the iframe video is in it would stop the automatic slider but I just can't get it to work.
javascript:
let slideIndex = 0;
showSlides();
let click = 0;
function clicked() {
var button = document.document.getElementsByClassName('slideshow-container');
button.addEventListener('slideshow-container', function handleClick() {
if (click = 1) {
click = 0;
}
else {
click = 1;
}
});
return click;
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("slides");
let 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";
if (click != 1)
{
setTimeout(showSlides, 6666);
}
}
HTML:
<Center>
<div class="slideshow-container">
<div class="slides fade">
<div class="numbertext">1 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="slides fade">
<div class="numbertext">2 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="slides fade">
<div class="numbertext">3 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</br>
<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</Center>
</div>
<br>
<script src="showSlides.js"></script>
Edit: as requested I swapped out the screenshots for the actual code and spent about 5 minutes trying to figure out how to actually post it and now I need more details but I don't know what to add so I'm writing this.
let slideIndex = 0;
var id = showSlides();
let click = 0;
function clicked() {
var button = document.document.getElementsByClassName('slideshow-container');
button.addEventListener('slideshow-container', function handleClick() {
if (click = 1) {
click = 0;
}
else {
click = 1;
}
});
return click;
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("slides");
let 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";
if (click != 1)
{
var timeoutId = setTimeout(showSlides, 6666);
return timeoutId
}
}
Then to stop it, just call
clearTimeout(id)
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 made a slideshow. This is the HTML code!
<div class="slideshow-container">
<div class="mySlides fade">
<img src="img/background.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img/background2.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img/background3.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
and this is the javascript code
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(slideIndex) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (slideIndex > slides.length) { slideIndex = 1; }
if (slideIndex < 1) { slideIndex = slides.length; }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
</script>
but due to some unknown reasons it doesn't work properly, please debug and explain why this code is not working?
You define your index variable twice: slideIndex. Once as a global variable and then as a function parameter, overwriting only the function parameter value. You can remove the function parameter and increment / decrease the slideIndex value in your plusSlides function.
var slideIndex = 1;
showSlides();
function plusSlides(n) {
slideIndex += n;
showSlides();
}
function showSlides() {
var slides = document.getElementsByClassName("mySlides");
if (slideIndex > slides.length) { slideIndex = 1; }
if (slideIndex < 1) { slideIndex = slides.length; }
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
I want to stop slide show on mouse over and start on mouse out.
I use this code but it doesn't work, and I cant figure out the problem.
here is my code and I would be thank if anybody help me.
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
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";
timer = setTimeout(showSlides, 5000);
}
$("#slideshow-container").mouseenter(function () {
clearInterval(mySlides);
});
$(function () {
$("#slideshow-container").click(function () {
$("#slideshow-container").stop();
})
})
and this link is my code with css and html, maybe help.
http://jsfiddle.net/3kspho6g/2/
Please try below solution
Updated Javascript
<script type="text/javascript">
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
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";
timer = setTimeout(showSlides, 2000);
}
function stopShow(timer) {
clearInterval(timer);
}
function startShow() {
timer = setTimeout(showSlides, 2000);
}
$(function() {
$('.slideshow-container').hover(function() {
stopShow(timer);
}, function() {
timer = setTimeout(showSlides, 2000);
});
});
</script>
HTML
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="https://drawingsdaily.com/wp-content/uploads/2018/06/forms-of-abstract-art-41-best-abstract-paintings-in-the-world-inspirationseek.jpg" style="width:100%;height:400px">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="https://drawingsdaily.com/wp-content/uploads/2018/05/watercolor-painting-art-50-best-watercolor-paintings-from-top-artists-around-the-world.jpg" style="width:100%;height:400px">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="https://www.painterartist.com/static/ptr/product_content/painter/2018/bob-ross/gallery/08.jpg" style="width:100%;height:400px">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="https://afremov.com/images/product/image_427.jpeg" style="width:100%;height:400px">
</div>
<a class="prev" onclick="plusSlides(1)">❮</a>
<a class="next" onclick="plusSlides(-1)">❯</a>
</div>
<div style="text-align:center" class="dot1">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
CSS Same as it is
Hope this help!
If you use setTimeout you need to use clearTimeout and the value need to be your timer:
$("#slideshow-container").mouseenter(function () {
clearTimeout(timer);
});