Slider is working fine, but the pause is not - javascript

Anybody knows what is the issue here? Looking to pause the slider when mouse is on it. I can not figure out what is wrong with it. slider works, but yet it does not pause.
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
var slideIndex = 0;
var timer = null;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
var timer = setTimeout(carousel, 1000);
mouseOver = clearTimeout(timer);
mouseOut = setTimeout(carousel, 1000);
}
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}

Related

How to insert auto-play option in my custom slider JavaScript code

I have created a slider code but the issue is I have to make it autoplay. This code actually compatible with my custom slider and I just want it to autoplay. I have tried some code shown below:
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("contents-2");
var slides2 = document.getElementsByClassName("contents-1");
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].className = slides[i].className.replace(" cont-1", "");
}
for (i = 0; i < slides2.length; i++) {
slides2[i].className = slides2[i].className.replace(" cont-2", "");
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active-page", "");
}
dots[slideIndex - 1].className += " active-page";
slides[slideIndex - 1].className += " cont-1";
slides2[slideIndex - 1].className += " cont-2";
setTimeout(currentSlide, 2000);
}
Please help me with this code, the code above does not autoplay, thank you.
you could add an interval function to your code
setInterval(function(){ plusSlides(1); }, 3000);
The new code I try is below:
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("contents-2");
var slides2 = document.getElementsByClassName("contents-1");
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].className = slides[i].className.replace(" cont-1", "");
}
for (i = 0; i < slides2.length; i++) {
slides2[i].className = slides2[i].className.replace(" cont-2", "");
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active-page", "");
}
dots[slideIndex-1].className += " active-page";
slides[slideIndex-1].className += " cont-1";
slides2[slideIndex-1].className += " cont-2";
setTimeout(function() {
showSlides(slideIndex += 1);
}, 4000);
}
the code above works perfectly but when I use navigation buttons it autoplay at a very high speed

How to add an autoplay function into existing slider?

I'm new to programming, so I would be grateful if anyone could help me out :) Is there a way to add an autoplay function to this existing slider?:
<script type="text/javascript">
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>

Cannot read property 'style' of undefined in Javascript Function

I have this Javascript function butwhen i run it it says 'Cannot read property 'style' of undefined at showSlides'
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";
}
if (n < 1) {slideIndex = slides.length - 1}
slideIndex cannot be slides.length, The last element of slides will be present at slides.length - 1, not slides.length.

Stop my slider at last picture using javascript

I am a beginner in javascript and I am searching for a solution to stop my slider after the last picture. The following code shows you the current code about it. The most part is from w3schools.
var slideIndex = 1;
showSlides(slideIndex);
function next_prev(n) {
showSlides(slideIndex += n);
}
function startbild(){
var slides = document.getElementsByClassName("mySlides");
if(slides == 0){} else{
slides[0].style.display = "block";
for (i = 1; i < slides.length; i++) {
slides[i].style.display = "none";
document.getElementById("dia-shows").innerHTML = 1;
}
}
}
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";
document.getElementById("dia-shows").innerHTML = slideIndex;
document.getElementById("dia-gesamt").innerHTML = slides.length;
}
I think, your code is incomplete. Could you post a working example instead where the problem happens?
changing
if (n < 1) {slideIndex = slides.length}
if (n > slides.length) {slideIndex = 1}
to
if (n < 1) {
slideIndex = 1;
} else if (n > slides.length) {
slideIndex = slides.length;
} else {
slideIndex = n;
}
should do what you want in both directions.
When first or last frame is visible, you should hide the related control that allows the user to slide once more.
Whenever a n is passed that is out of the valid range, it gets limited to that range.
if (n > slides.length) {slideIndex = 1} //if last is reached, restart with first
should be
if (n > slides.length) {slidesIndex=slides.length} //if last is reached, stay at last
You could also change
function next_prev(n) {
showSlides(slideIndex += n);
}
To:
function next_prev(n) {
var slides = document.getElementsByClassName("mySlides");
showSlides(slideIndex = Math.min(slideIndex+n,slides.length));
}
Note: w3schools promotes bad styled code, please start learning from MDN, there much better + have better coding style + better explanations. So here is a improved code:
var slideIndex = 1;
var slides;// no need to redefine in every function
function init(){
slides = document.getElementsByClassName("mySlides");//get the slides, store in variable
if(!slides){
return console.error("no slides..");
}
showSlides();//show the first time
setInterval(next_prev,1000,1);//demo ( every 1000ms increase with 1)
}
window.onload=init;//if page loaded, init
function next_prev(n) {
slideIndex=Math.max(Math.min(slideIndex+n,slides.length),1);// slidesIndex stays between slides.length and 1.
showSlides();
}
function showSlides() {//no need to pass n, its equal to slideIndex
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none"; //hide all
}
slides[slideIndex-1].style.display = "block";//show one
document.getElementById("dia-shows").innerHTML = slideIndex;
document.getElementById("dia-gesamt").innerHTML = slides.length;
}
--> https://developer.mozilla.org/de/docs/Web/JavaScript

how to add JS to this code so it will automatically slide?

how do i make this automatically slide?
I've already made it so you can manually slide them, but i want them moving at the same time.
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");
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";
dots[slideIndex - 1].className += " active";
}
};
You can use the below code to make it work.
var slideIndex = 1;
$(function () {
automaticSlider();
})
function automaticSlider() {
showSlides(slideIndex);
setInterval(function () { automaticSlider(); }, 1000) // 1000 is 1 sec before calling next slide.
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
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";
dots[slideIndex - 1].className += " active";
}
};
Calling the function automaticSlider() at load, and then set interval is call it automaticSlider() function after 1 sec. you can increase the time as per your convince.

Categories