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)
Related
I have a little bit problem while using variables of two functions together. In this both functions are not working at once.
Here are my two functions :
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(" red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " red";
}
var slideIndex = 1;
showDivs2(slideIndex);
function plusDivs2(n) {
showDivs2(slideIndex += n);
}
function currentDiv2(n) {
showDivs2(slideIndex = n);
}
function showDivs2(n) {
var i;
var x = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("demo2");
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(" red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " red";
}
.mySlides {
display: none;
}
.mySlides2 {
display: none;
}
<div class="content">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px; height: 200px;">
</div>
<div class="center">
<div class="section">
<button class="button light-grey" onclick="plusDivs(-1)">❮ Prev</button>
<button class="button light-grey" onclick="plusDivs(1)">Next ❯</button>
</div>
</div>
<div class="content2">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px;height: 200px;">
</div>
<div class="center">
<div class="section">
<button class="button light-grey" onclick="plusDivs2(-1)">❮ Prev</button>
<button class="button light-grey" onclick="plusDivs2(1)">Next ❯</button>
</div>
</div>
In this, I have two div containing images with next and prev button, images of first function is loading by default but when i click on button then second image is appear. I just want to fix it i.e images of both div will load default.
I am working on a carousel in w3school. They actually have an inline javascript code and I am trying to convert it to an external javascript file. I have this code in my external file
window.addEventListener('DOMContentLoaded', function () {
var slideIndex = 1;
showSlides(slideIndex);
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";
}
}, false);
But when I navigate the carousel, it displays error Uncaught ReferenceError: currentSlide is not defined at HTMLSpanElement.onclick and does not work/navigate the images in the carousel
This is the HTML code
<div class="slideshow">
<div class="slideshow-container">
<div class="mySlides fade">
<img class="carousel-item" src="https://lorempixel.com/800/400/food/1">
</div>
<div class="mySlides fade">
<img class="carousel-item" src="https://lorempixel.com/800/400/food/2">
</div>
</div>
<div class="slide-nav">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>
</div>
<script type="text/javascript" src="js/components.js"></script>
Because currentSlide is not globally accessible (HTML inline event handlers run in the global scope). You need to define it in the global scope for it to work:
function currentSlide(n) {
showSlides(slideIndex = n);
}
window.addEventListener("DOMContentLoaded", function() {...}, false);
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);
});
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.