We Keep Coding

Image Auto slider is not working, Kindly hep me to fix the same

How can I make this slider run automatically with previous/next controls?
It's working fine when I click on the previous and next buttons, but the sliders are not running automatically. Also, when I move the cursor to any of the slides it won't pause on mouse up.
var slideIndex = 0;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(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";
setTimeout(showSlides, 1000);
}
<div class="slideshow-container">
<div class="mySlides fade">
<img src="/imgs/hol_str_08mar.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/amz_dls_05mar.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/smr_apl_08feb.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/meg_fas_08mar.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/spk_str_08mar.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center;display:none">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>

Maybe to solve your problem, you should try to pass the "SlideIndex" Variable as parameter of the showslides function in your setTimeout.
So your setTimeout code should be
setTimeout(function(){showSlides(SlideIndex+1)},1000)
Or you could even use your plus function
setTimeout(function(){plusSlides(1)},1000)

Create a slideshow of images in which the image changes every 5 seconds

Can you help me a little, please? I have no experience with JavaScript yet. I would like to change images every 5 seconds, but the buttons remain functional (ie when I press them, change the image, even if the 5 seconds have not yet passed). Thank you very much!
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving1.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving6.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving3.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving2.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</section>
<div class="dots" >
<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>
<script>
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";
}
</script>

The following code achieves exactly what you want. Every time a news slide is set the old timer gets invalidated and a new one is initiated. The timer will run the plusSlides function every 5 seconds. Hope this code helps you:
<section>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 1</div>
<img src="imagini/driving1.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 2</div>
<img src="imagini/driving6.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 3</div>
<img src="imagini/driving3.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 4</div>
<img src="imagini/driving2.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</section>
<div class="dots" >
<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>
<script>
//timer
var newSlide;
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n = +1) {
slideIndex = slideIndex + n;
showSlides(slideIndex);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
//invalidate old timer
clearInterval(newSlide);
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";
//set a new interval
newSlide = setInterval(plusSlides, 5000);
}
</script>

Vanilla JS - slider - Active dots

Please, can you help me assign .active class to slider Dots, which are generated by JS, they are not part of HTML. When slide 1 is active, I need dot 1 to have class .active, but no luck.. all solutions I have foud are for dots hardcoded in HTML.
My HTML:
<div class="w3-content w3-display-container">
<div class="w3-display-container mySlides">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 1</h3>
<p>1. Lorem Ipsum.</p>
</div>
</div>
<div class="w3-display-container mySlides">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 2</h3>
<p>2.Lorem Ipsum.</p>
</div>
</div>
<div class="w3-display-container mySlides">
<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 3</h3>
<p>3. Lorem Ipsum.</p>
</div>
</div>
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">❮</button>
<div id="js-slider-dots"></div>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">❯</button>
</div>
My JS (which switch the slides and generate dots):
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function goToDiv(n) {
showDivs(slideIndex = n);
}
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";
}
function generateDots() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
var dotNumber = i + 1;
var dot = document.createElement('span');
dot.innerHTML =
'<button class="js-dot" onclick="goToDiv(' + dotNumber + ')">' + dotNumber + '</button>';
document.getElementById('js-slider-dots').appendChild(dot);
}
}
generateDots();
It is also all live on JS Bin: https://jsbin.com/ketohatane/edit?html,js,output

You can easily do it by .classList.add() and .remove().
Just select the dots, and activate the dot that belongs to the active slide at showDivs:
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//get the list of dots
var y = document.getElementById("js-slider-dots").children;
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
//remove .active from all dots
y[i].classList.remove("active")
}
x[slideIndex - 1].style.display = "block";
//add .active to the selected dot
y[slideIndex - 1].classList.add("active")
}
See this snippet:
var slideIndex = 1;
function plusDivs(n) {
showDivs(slideIndex += n);
}
function goToDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//get the list of dots
var y = document.getElementById("js-slider-dots").children;
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
//remove .active from all dots
y[i].classList.remove("active")
}
x[slideIndex - 1].style.display = "block";
//add .active to the selected dot
y[slideIndex - 1].classList.add("active")
}
function generateDots() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
var dotNumber = i + 1;
var dot = document.createElement('span');
dot.innerHTML =
'<button class="js-dot" onclick="goToDiv(' + dotNumber + ')">' + dotNumber + '</button>';
document.getElementById('js-slider-dots').appendChild(dot);
}
}
generateDots();
//placed AFTER generateDots()
showDivs(slideIndex);
/* Just for illustration */
.active{outline:solid 1px red;}
<div class="w3-content w3-display-container">
<div class="w3-display-container mySlides">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 1</h3>
<p>1. Lorem Ipsum.</p>
</div>
</div>
<div class="w3-display-container mySlides">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 2</h3>
<p>2.Lorem Ipsum.</p>
</div>
</div>
<div class="w3-display-container mySlides">
<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 3</h3>
<p>3. Lorem Ipsum.</p>
</div>
</div>
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">❮</button>
<div id="js-slider-dots"></div>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">❯</button>
</div>

If you access the DOM from your goToDiv function, you can be sure that you are accessing the DOM after it has been updated with your class="js-dot" elements.
Something like this will give you the functionality you want.
function goToDiv(n) {
showDivs(slideIndex = n);
var dots = document.getElementsByClassName('js-dot');
for(var i = 0; i < dots.length; i++) {
if (i == n - 1) {
dots[i].classList.add('active');
} else {
dots[i].classList.remove('active');
}
}
}
Here it is in action:
https://jsbin.com/tekukebeye/1/edit?html,js,output

How to use style property in Typescript

I want a slideshow in simple html and javascript. i have written my code below. there is an error in using style property to hide and show image. I used this code in typescript (ionic). I have error in both lines having style property in code 'x[i].style.display'. Please tell me how to use style
Html code is -
<div class="w3-content w3-display-container">
<div class="w3-display-container mySlides">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
French Alps
</div>
</div>
<div class="w3-display-container mySlides">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
Northern Lights
</div>
</div>
</div>
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">❯</button>
Typescript code-
constructor(public navCtrl: NavController)
{
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
console.log(x);
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";
}
}

You calling your scripts before page loaded.
Remove showDivs(slideIndex) call from script and call it in onload:
<body onload="showDivs(1)">

You can use HTMLDivElement in TypeScript. For example;
var container: HTMLDivElement;
container.style.color = "red";

how to code for multiple modals where some of them are carousels with different number of slides

I have a page with several buttons, when each button is clicked a different modal pops up. Some of the modals are carousels, the code I have works but for only one of the carousels, when I have more than one I get extra empty slides on all the carousels. So I'm guessing my code is counting all the slides from all the carousels together. Im trying to have write something where it says if this modal is clicked then get the slides from the clicked modal only but Im struggling with that.
These are the bits of relevant code:
<script>
//Carousel
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(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
</script>
<script>
//Display corresponding modal of letter that is clicked
$(".button").on("click", function() {
var modal = $(this).data("modal");
$(modal).show();
document.body.classList.add("modal-open");
});
//Close modal when "x" is clicked or when area outside modal is clicked
$(".modal").on("click", function(e) {
var className = e.target.className;
if(className === "modal" || className === "close"){
$(this).closest(".modal").hide();
document.body.classList.remove("modal-open");
}
});
</script>
<button class="button" data-modal="#modalOne"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalB"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalC"><img id="myImg" src=""></button>
<!-- The Modal -->
<div id="modalA" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class= "mySlides">
<img class="gif" src="" width="100" height="100" >
<h4>Title</h4>
<p> content </p>
</div>
<div class="mySlides">
<h4 Title</h4>
<p> content </p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>
<!-- The Modal B -->
<div id="modalB" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
</div>
</div>
</div>
<!-- The Modal C -->
<div id="modalC" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
<div class="mySlides">
<h4></h4>
<p></p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>

When you do this line
var x = document.getElementsByClassName("mySlides");
You count all the elements with class name of "mySlides", which is ALL of the slides in the HTML document.
Add code in your button click routine to count the number of slides in the corresponding modal:
Add this at the top of the javascript:
var modal = "modalA";
showDivs(slideIndex, modal);
Change the button click to:
$(".button").on("click", function() {
modal = $(this).data("modal").text();
$("#" + modal).show();
document.body.classList.add("modal-open");
});
Modify your showDivs function to include the new variable:
function showDivs(n, modal) {
var i;
var x = document.getElementById(modal).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(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
Finally, change the data-modal attributes of your buttons to read:
<button class="button" data-modal="modalA">
<button class="button" data-modal="modalB">
<button class="button" data-modal="modalC">
You will also need to update the lines:
function plusDivs(n) {
showDivs(slideIndex += n, modal);
}
function currentDiv(n) {
showDivs(slideIndex = n, modal);
}