We Keep Coding

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>

Adjust javascript slider so that first slide has a different timeout to the rest of the slides

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.

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.

Slider is working fine, but the pause is not

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);
}

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.