Add bullets to slider that automatically change with the right slide

Question

I made a slider with seven pictures and next and previous buttons. The slider works automatically and when hovering the slider the loop stops.

I've tried to add interactive bullets - now wrote in static HTML - that respond to their given picture.
The bullets should be as many as there are slides, but without having to add them myself one by one.
But I don't know how to do it. Can anyone help?

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

  if (slides.length > 0) { 
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
  }
}

$(document).ready(function() {
  var interval = setInterval(function() {
    var $curr = $('.mySlides:visible'), 
        $next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
    $next.css('z-index',2).fadeIn('slow', function() {
      $curr.hide().css('z-index',0);
      $next.css('z-index',1);
    });
  }, 5000);
  
  $('.mySlides').hover(function() {
    clearInterval(interval);
  }, function() {
    interval = setInterval(function() {
      var $curr = $('.mySlides:visible'), 
          $next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
      $next.css('z-index',2).fadeIn('slow', function() {
        $curr.hide().css('z-index',0);
        $next.css('z-index',1);
      });
    }, 5000);
  });
});

/* SLIDER*/
#containermio {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  height: 536px;
  position: relative;
}

#containermio a:hover {
  color: white;
}

#containermio ul {
  margin: 0px;
  padding: 0px;
  width: 100%;
  list-style: none;
  height: 100%;
  position: absolute;
}

#containermio ul li {
  height: 100%;
  display: none;
  position: relative;
}

#containermio ul li:first-child {
  display: block;
}

#containermio ul li img {
  width: 100%;
  min-height: 100%;
}

/* FADE */
.mySlides {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* SLIDE TITLE*/
.text {
  margin: 0;
  padding: 20px 0 0 25px;
  font-size: 40px;
  font-weight: 600;
  color: #f7f7f7;
  text-align: center;
  position: absolute;
  font-family: 'Montserrat', sans-serif;
}

/* ARROWS */
.prev, .next {
  z-index: 99;
  cursor: pointer;
  position: absolute;
  display: block;
  top: 40%;
  width: auto;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  padding: 25px 25px 25px 25px;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  text-decoration: none;
}

/* DOTS */
.dotdiv {
  bottom: 10px;
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 99;
}

.dot {
  cursor:pointer;
  height: 6px;
  width: 6px;
  margin: 0 2px;
  background-color: #eee;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  z-index: 99;
}

.active, .dot:hover {
  background-color: #717171;
}






  
    
      alicè
      
    
    
      halo halo
      
    
    
      tilt
      
    
    
      artist unknown
      
    
    
      insa
      
    
    
      blue lights
      
    
    
      outdoor festival
      
    
  
  
  ❮
  ❯

jsfiddle: https://jsfiddle.net/e9m3yupp/ (original: https://jsfiddle.net/hctxgqhx/)

myfunkyside · Accepted Answer

I changed a lot in your code, in order to make it much more flexible and concise.
There are too many changes to explain every single one, so I used comments in the code snippet below instead, to explain what every line does.

But I will sum up the most major changes:

I put all the slides in an array. In that array, every slide is represented by an object containing a txt and an img property. The first index of the array ([0]) is used to store the slide-index.
I removed the
- s from the HTML, and replaced them with one
  . And instead of switching elements, I change the source of the image.
  This way, you don't have to add new slides to your HTML, all you have to do is add a slide-object to the slides-array in JS.
- I moved the onclick handlers (for the arrows and bullets/dots) from HTML to JS. It's considered good practice to keep all JS-code outside of your HTML.
- Don't pay too much attention to all the 'changes' in the CSS. Mostly, those are just me reordering and reformatting things for my own readability, but I'll admit it's an acquired taste:)
  There might be however a few actual changes that are critical for proper layout/functionality, but like I said I changed so much that I don't even remember.
Unfortunately, I couldn't get the CSS fade animation (see code block below) to work with the new code. Because now there is only one element for all slides, switching the source instead of the elements, the animation doesn't fire anymore. I tried a lot of things, but with no success.
```
/* FADE */
.slide {-webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s;}
@-webkit-keyframes fade {from {opacity:.4} to {opacity:1}}
@keyframes fade {from {opacity:.4} to {opacity:1}}
```
So I had to move that animation to JS, using jQuery:
```
$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);});
```
If you really want to do the animation with CSS, you could use similar code as I used to create the bullets/dots (see code snippet), to also create an

for every slide in the array. But that will crowd your webpage with a whole lot of elements the more slides you add... not sure which option is better.

Code Snippet:

$(document).ready(function() {
  var interval;
  var slides = [
    1,
    {txt:"alicè", img:"http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"},
    {txt:"halo halo", img:"http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"},
    {txt:"tilt", img:"http://kenwheeler.github.io/slick/img/fonz1.png"},
    {txt:"artist unknown", img:"http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"},
    {txt:"insa", img:"http://kenwheeler.github.io/slick/img/fonz2.png"},
    {txt:"blue lights", img:"http://kenwheeler.github.io/slick/img/fonz3.png"},
    {txt:"outdoor festival", img:"http://kenwheeler.github.io/slick/img/fonz3.png"}
  ];
  
  /* SLIDE INTERVAL*/
  function startSlideInterval(){interval = setInterval(function(){$(".next").click();},5000);} //trigger the next-button on every interval
  $('.slide').hover(function(){clearInterval(interval);},startSlideInterval); //clear interval on 'hover', restart interval on 'unhover'
  
  /* SHOW SLIDE */
  function showSlide(n) {
    if (n>slides.length-1) {n=1;} else if (n<1) {n=slides.length-1;} //loop around to first/last slide
    $(".slide img").attr("src",slides[n].img); //change image
    $(".slide div").html(slides[n].txt); //change text
    $(".bullets span:nth-child("+slides[0]+")").removeClass("active"); //deactivate old bullet
    $(".bullets span:nth-child("+n+")").addClass("active"); //activate new bullet
    $(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);}); //fade new slide
    slides[0] = n; //set slide-index to new value
  }
  
  /* ARROWS */
  $(".prev").click(function(){showSlide(slides[0]-1);}); //click-handler
  $(".next").click(function(){showSlide(slides[0]+1);}); //click-handler
  
  /* BULLETS */
  (function(){
    var bullets = "";
    for (var i=1,count=slides.length; i


html {width:95%; height:90%;} /*ONLY FOR CODE SNIPPET*/
body {width:100%; height:100%;}

/* SLIDER */
#slider {position:relative; width:90%; height:80%; margin:0 auto; background-color:grey; overflow:hidden;}
#slider .slide {width:100%; height:100%; text-align:center;}
#slider .slide img {width:auto; height:100%;}
#slider .slide div {position:absolute; left:0; top:0; margin:0; padding:20px 0 0 25px; text-align:center; font-family:'Montserrat',sans-serif; font-size:40px; font-weight:600; color:#f7f7f7;}

/* ARROWS */
#slider a {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: auto;
  padding: 25px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  z-index: 1;
  transition: background-color 0.6s ease;
}
#slider a:hover {background-color:rgba(0,0,0,0.8);}
#slider a.prev {left:0; border-radius:0 3px 3px 0;}
#slider a.next {right:0; border-radius:3px 0 0 3px;}

/* BULLETS */
.bullets {position:absolute; bottom:10px; width:100%; text-align:center; z-index:1;}
.bullets span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  border-radius: 50%;
  background-color: #eee;
  cursor:pointer;
  transition: background-color 0.6s ease;
}
.bullets span:hover, .bullets span.active {background-color:#717171;}





  
  ❮❯



jsfiddle: https://jsfiddle.net/hctxgqhx/16/

Add bullets to slider that automatically change with the right slide

Answers (1)

Related Questions