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
Related
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";
I want to display image caption under each images in image slider.
But right now my problem is all the image captions are displaying for each image like this
View :
<div class="grid-11 left">
#if (Model.Photos.Count > 0)
{
<div style="padding:10px">
<div class="slide-content" style="max-width:800px">
#foreach (var photos in Model.Photos)
{
<div>
<img class="mySlides" src="#Url.Content(photos.photo_url)"/>
</div>
<span>#photos.photo_caption</span>
}
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
</div>
</div>
</div>
</div>
}
</div>
Script :
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");
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";
}
How do is display caption for each image by passing image_id?
The problem is you're targeting the image only for display block/none via class="mySlides". You need to wrap the image and caption in some sort of container and target that instead.
#foreach (var photos in Model.Photos)
{
<div class="mySlides">
<div>
<img src="#Url.Content(photos.photo_url)"/>
</div>
<span>#photos.photo_caption</span>
</div>
}
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);
}
I am trying to make a automatic Javascript Slideshow based on w3 css that switches to manual when you hit the arrows. Besides this, in the beginning, if the previous or next arrows are not clicked, the slideshow will run for 2 loops.
When the page is loaded, the slideshow is in automated mode. That time, if we click the previous or next arrow, it should stop at the slide at that time. Instead it shows a white screen which looks ugly. I am adding the pause variable to try to acheive the pause function on clicking of arrows. Please tell what I am doing wrong. Note - I am very new to Javascript.
Below is my snippet -
var paused = false;
var myIndex = 0;
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 1000; //for testing purposes
function carousel() {
var x = document.querySelectorAll(".mySlides"); //using modern querySelectorAll
maxLength = x.length * loops; //times 2 for two loops
//optimalization here - borrowing Array forEach to loop over node list
Array.prototype.forEach.call(x, function(element) {
element.style.display = "none";
});
counter++; //adding counter
if (paused === false) {
if (myIndex >= x.length) {
myIndex = 0
}; //reset this to zero indexing
x[myIndex].style.display = "block"; //show the slide
if (counter <= maxLength) //ie counter <= 10, execute
{
myIndex++; //add index with every pass
setTimeout(carousel, interval);
Array.prototype.forEach.call(x, function(element) {
element.classList.remove("w3-animate-fading"); //remove the fading
});
}
}
else
{
}
}
carousel();
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
paused = true;
}
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";
}
.w3-content.w3-display-container {
margin-top: 100px;
}
button.w3-button.w3-display-left.w3-black {
position: relative;
left: -50px;
}
button.w3-button.w3-display-right.w3-black {
position: relative;
right: -118px;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-content w3-display-container " style="max-width:150px">
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" target="_blank" title="slide1">
<img class="" src="img01.jpg" style="width:100%">
</a>
<div class="w3-display-bottomleft w3-large w3-container w3-
padding-16 w3-black">
Slide-1 (read more)
</div>
</div>
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" target="_blank" title="slide2">
<img class="" src="img02.jpg" style="width:100%">
</a>
<div class="w3-display-bottomright w3-large w3-container w3-padding-16
w3-black">
Slide-2 (more)
</div>
</div>
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" target="_blank" title="slide3">
<img class="" src="img03.jpg" style="width:100%">
</a>
<div class="w3-display-topleft w3-large w3-container
w3-padding-16 w3-black">
Slide-3 (read more)
</div>
</div>
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" target="_blank" title="slide4">
<img class="" src="img04.jpg" style="width:100%">
</a>
<div class="w3-display-topright w3-large w3-container
w3-padding-16 w3-black">
Slide-4 (read more)
</div>
</div>
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" target="_blank" title="slide5">
<img class="" src="img05.jpg" style="width:100%">
</a>
<div class="w3-display-middle w3-large w3-container
w3-padding-16 w3-black">
Slide-5 (read more)
</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>
</div>
Ok, so I changed your slideShow and here is the updated version, everything seems to be fully working now.
https://jsfiddle.net/qhx93g1q/3/
//Changed index so 1 is actually first image, rather than starting at 0 index
var index = 1;
var paused = false;
var slideShow = [];
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 2000; //for testing purposes
var x = document.getElementsByClassName("slideShow");
maxLength = x.length * loops; //times 2 for two loops
for (i=0; i<x.length; i++) {
slideShow[i] = document.getElementsByClassName("slideShow")[i];
slideShow[i].style.display = "none";
}
slideShow[0].style.display = "block";
var slides = setInterval(function() {
counter++; //adding counter
if (counter <= maxLength) //ie counter <= 10, execute
{
if (index < slideShow.length) {
index++;
showDivs();
}
else {
index = 1;
showDivs();
}
}
else {
}
},interval);
function control(n) {
clearInterval(slides);
if (index+n > slideShow.length) {
index = 1;
}
else if (index+n <= 0) {
index = slideShow.length;
}
else {
index += n;
}
showDivs();
}
function showDivs() {
//Hide all slideShow elements, and then show only the targeted element
for (i=1; i<=slideShow.length; i++) {
slideShow[i-1].style.display = "none";
}
slideShow[index-1].style.display = "block";
}
.w3-content.w3-display-container {
margin-top: 100px;
}
button.w3-button.w3-display-left.w3-black {
position: relative;
left: -50px;
}
button.w3-button.w3-display-right.w3-black {
position: relative;
right: -118px;
}
.fadeIn {
animation-name: fadeIn;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
#keyframes fadeIn {
from {opacity:0;}
to {poacity:1;}
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-content w3-display-container " style="max-width:150px">
<div class="w3-display-container fadeIn slideShow">
<a href="" target="_blank" title="slide1">
<img class="" src="img01.jpg" style="width:100%">
</a>
<div class="w3-display-bottomleft w3-large w3-container w3- padding-16 w3-black">
Slide-1 (read more)
</div>
</div>
<div class="w3-display-container fadeIn slideShow">
<a href="" target="_blank" title="slide2">
<img class="" src="img02.jpg" style="width:100%">
</a>
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
Slide-2 (more)
</div>
</div>
<div class="w3-display-container fadeIn slideShow">
<a href="" target="_blank" title="slide3">
<img class="" src="img03.jpg" style="width:100%">
</a>
<div class="w3-display-topleft w3-large w3-container
w3-padding-16 w3-black">
Slide-3 (read more)
</div>
</div>
<div class="w3-display-container fadeIn slideShow">
<a href="" target="_blank" title="slide4">
<img class="" src="img04.jpg" style="width:100%">
</a>
<div class="w3-display-topright w3-large w3-container
w3-padding-16 w3-black">
Slide-4 (read more)
</div>
</div>
<div class="w3-display-container fadeIn slideShow">
<a href="" target="_blank" title="slide5">
<img class="" src="img05.jpg" style="width:100%">
</a>
<div class="w3-display-middle w3-large w3-container
w3-padding-16 w3-black">
Slide-5 (read more)
</div>
</div>
<button class="w3-button w3-display-left w3-black" onclick="control(-1)"><</button>
<button class="w3-button w3-display-right w3-black" onclick="control(1)">></button>
</div>
I'm working on making a js slider to be both automated and have the arrow controls, I have the arrow controls but I'm unable to make it so that it's automated too.
Here is the code;
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<div class="w3-content w3-display-container" style="max-width:100%">
<img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/Free_Printing_Lions_Front.jpg" style="width:100%">
<img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/All_Blacks_Training.jpg" style="width:100%">
<img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/TourJersey_1.jpg" style="width:100%">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
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>
Could someone please shine a light on getting it to run automatically?
You can make it to run automatically by calling setInterval function.
The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
The setInterval() method will continue calling the function until
clearInterval() is called, or the window is closed.
I have created a function here so you can create an idea how to make it.
You can read more here for setInterval()
I didn't run this code so let me know if it has any errors.
function makeInfinite(time){
setInterval(function(){
plusDivs(1);
},time*1000);
}
makeInfinite(3);
setInterval() is what you are looking for. You probably will also want to try to add in a way to delay the interval whenever someone clicks on a different slide, since it would be a bad user experience to click "slide3" only to have it leave half a second later because of the automation.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<div class="w3-content w3-display-container" style="max-width:100%">
<img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/Free_Printing_Lions_Front.jpg" style="width:100%">
<img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/All_Blacks_Training.jpg" style="width:100%">
<img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/TourJersey_1.jpg" style="width:100%">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
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";
}
setInterval(function(){showDivs(++slideIndex);},3000);
</script>