JSFiddle - React, Tailwind, and code Playground

by 76484

HTML

<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>
<div class="slide">
  <div id="slide">
    <h1>Galeria d'imatges amb Slide</h1>
		<ul id="slider">
			<li class="activa"><img src="https://images.unsplash.com/photo-1513639725746-c5d3e861f32a?auto=format&fit=crop&w=350&q=80" alt="img1" /></li>
			<li class="noactiva"><img src="https://images.unsplash.com/photo-1512101147095-d05249ea9a04?auto=format&fit=crop&w=350&q=80" alt="img2" /></li>
			<li class="noactiva"><img src="https://images.unsplash.com/photo-1480632563560-30f503c09195?auto=format&fit=crop&w=350&q=80" 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>

CSS

.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%;
}

JavaScript

// https://stackoverflow.com/q/47954165/3397771

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

var navegar = function () {  
  activeIndex += this.id === 'seg' ? 1 : -1;
  
  if (activeIndex >= $slides.length) {
  	activeIndex = 0;
  }
  else if (activeIndex < 0) {
  	activeIndex = $slides.length - 1;
  }
  
  render();
};

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


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

new desplazar();