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
Related
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
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>
I am trying to make the first slide in the sequence timeout at a different rate to the rest of the slides.
I think I need something like this - If slide == slide.1, setTimeout to 30000 otherwise 1500
This is what I have already:
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";
if ('undefined' !== typeof dots[slideIndex - 1]) {
dots[slideIndex - 1].className += " active";
}
timer = setTimeout(showSlides, 15000);
}
function pauseShow() {
clearTimeout(timer);
}
you did much code for less function i guess.
When i see it correctly your slide Index indicates to which slide your function should slide to.
In this case you are right, you will need:
if(slideIndex == 1) setTimeout(showSlides, 3000);
else setTimeout(showSlides, 1500);
At the last index you also need a reset of your slideIndex to 1 again.
Its just another if clause again.
I would also suggest you search for "mySlides" not in your recursive function.
You could just search for it before declaring the function and use the global var. This prevents searching in the whole dom every time you want to slide.
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.
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);
}