Slider with bullets

Question

I have made a slider of three photos. I have two buttons (next and prev), this part works fine. I want to use 3 bullets for selecting the images too, but I am having some problems making the bullet buttons work with the slider. I can't find the way to do this.

Can anyone help me with this code? I'm a real beginner with JavaScript.

Thanks.

/**
 * Navegación por botones
 */
var navegar = function () {
 var elemento = document.getElementById('slider').getElementsByTagName('li');
 var pos = 0;
 for (var i=0; i<elemento.length; i++) {
  if (elemento[i].className == "activa") {
   elemento[i].className = "noactiva";
   pos = i;
  }
 }
 /** Pulsar Anterior **/
 if (this.id == "ant" && pos > 0) {
  elemento[pos-1].className = "activa";
 } else if (this.id == "ant") {
  elemento[elemento.length-1].className = "activa";
 } 
 
 /** Pulsar Siguiente **/
 if (this.id == "seg" && pos < elemento.length-1) {
  elemento[pos+1].className = "activa";  
 } else if (this.id == "seg") {
  elemento[0].className = "activa";
 }
 return false;
};

var desplazar = function () {
 var nav = document.querySelectorAll(".nav");
 for (var i=0; i<nav.length; i++) {
  nav[i].onclick = navegar; 
 }
};

window.onload = function (){
 new desplazar();
};

body.slide { background-color:#9c9c9c  }

#slider {display: block; margin: 0 auto;padding: 0;position: relative;width: 50%;min-height: 22.5em; max-height: 22.5em;list-style: none; overflow: hidden;}

#slider li {position: absolute; background: white; float: left; margin: 0 15px 30px; padding: 10px 10px 35px; box-shadow: 0 4px 6px rgba(0,0,0,.3);}

#slider li img { width: 100%;}

#slider .activa { z-index: 1; opacity: 1;}

#slider .noactiva { z-index: 0; opacity: 0;}

.nav { display: inline-block; margin-top: 1.5em; text-decoration: none;}

.botons { text-align: center;}

.button { position: absolute; top: 50%; }

#linknum ul{list-style:none; display:block; text-align:center; }

#linknum ul li{display:inline; margin-right: 3%;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>PracticaFinal</title>  
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
  
</head>
 <ul id="navTop">
     <li><a href="index.html">Home</a></li>
     <li><a href="slide.html">Slide</a></li>
      <li><a href="carta.html">Carta</a></li>
 </ul>
<body class="slide">
 <div id="slide">
  <h1>Galeria d'imatges amb Slide</h1>
  <ul id="slider">
   <li class="activa"><img src="images/imatge1.jpg" alt="img1" /></li>
   <li class="noactiva"><img src="images/imatge2.jpg" alt="img2" /></li>
   <li class="noactiva"><img src="images/imatge3.jpg" alt="img3" /></li>
  </ul>
 <div class="botons">
  <button id="ant" class="nav" >Anterior</button>
  <button id="seg" class="nav" >Següent</button>
  
  <input id="button-1" type="radio" name="radio-set" class="activa" checked="checked">
  <label for="button-1" class="button-label-1"></label>
  <input id="button-2" type="radio" name="radio-set" class="noactiva">
  <label for="button-2" class="button-label-2"></label>
  <input id="button-3" type="radio" name="radio-set" class="noactiva">
  <label for="button-3" class="button-label-3"></label>


 </div>

 </div>
</div> 
</body>

score 1 · Answer 1 · answered Dec 23 '17 at 19:17

I think you will find your applications easier to think about if you separate the application state from the representation. By "application state", we mean the data in the application that changes over time. In this example, the application state has a single property: the currently active slide index.

In order for our code to know the current application state, it must use the DOM to figure out the index of the slide that is currently active. We can move the state to our code-level by creating a global variable to hold the active slide index:

var activeIndex = 0;

And while we are creating global variables, let's cache some references to the DOM elements we will be continually using so that we do not have to keep fetching and re-fetching them:

var $bullets = document.querySelectorAll('input[name="radio-set"]');
var $slides = document.getElementById('slider').getElementsByTagName('li');

Next, let's update our navegar function to use our activeIndex variable:

var navegar = function () {  
    activeIndex += this.id === 'seg' ? 1 : -1;

    if (activeIndex >= $slides.length) {
        activeIndex = 0;
    }
    else if (activeIndex < 0) {
        activeIndex = $slides.length - 1;
    }

    render(); // TODO: We will define this later.
}

We will now define our render function whose job it will to update the page with the current application state:

var render = function () {
    for (var i = 0; i < $slides.length; i++) {
        $bullets[i].className = i === activeIndex ? 'activa' : 'noactiva';
        $slides[i].className = i === activeIndex ? 'activa' : 'noactiva';
    }
};

We are now ready to address your original question and to bind the radio buttons to our slider navigation. All we need do is attach an onchange handler to each bullet that will update the ativeIndex and then call render. We can do this by adding something like the following to the desplazar function:

for (var i = 0; i < $bullets.length; i++) {
    (function (index) {
        $bullets[index].onchange = function () {
            activeIndex = index;
            render();
        };
    })(i);
}

The (function (index) { /*...*/ })(i); bit might look a little odd. If you are curious about it, a discussion can be found here.

Additionally, I have created a fiddle for your reference.

Thank you very much for your time and for your help. Is very helpful for me. It's possible make the code without jQuery? — daniani, Dec 23 '17 at 23:03
@daniani: jQuery is _not_ used in my example. I chose to prefix my variables that reference DOM elements with a dollar sign, "$", for convenience; but they could be given any valid identifier name. — 76484, Dec 23 '17 at 23:15
Ok, thanks. Sorry, i didn't understand the $ symbol before. I have some problem with the code, when copying it to my program (Sublime Text) the code does not work. Buttons and bullets doesn't make nothing. Thanks — daniani, Dec 25 '17 at 18:49
Try wrapping the code in a jQuery ready handler: `$(function () { /** code goes here */ });`. See: https://api.jquery.com/ready/ — 76484, Dec 25 '17 at 19:08

Slider with bullets

1 Answers1