So basically I want to move my slider index with my keyboard.
The current slideshow can be navigated with the built in buttons, but i want to be able to use my keyboard to move forward or back. I have linked my keyboard with switch cast (37 for left) (39 for right), but nothing happens.
Here is all my 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";
}
document.onkeydown = function(n) {
switch (e.keyCode) {
case 37:
//left
slideIndex--;
break;
case 39:
//right
slideIndex++;
break;
}
}
Change the variable name in document.onkeydown.
Make sure you call the function to display slides, when the current slide changes.
E.g.:
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
//left
e.preventDefault();
slideIndex--;
showSlides(slideIndex);
break;
case 39:
//right
e.preventDefault();
slideIndex++;
showSlides(slideIndex);
break;
}
}
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.
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.