1

tengo una galería de imágenes que cambian con los botones pero necesito que a medida que avanzan las imágenes la barra de carga aumente o disminuya dependiendo de la dirección que se desee, hasta el momento llevo el siguiente código pero no se como hacer para que la barra de navegacion funcione en todo momento, agradezco su valiosa ayuda!

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(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 load(){
	$(".right-button").click(function(){
	    $(".load-bar").addClass('load-bar2');
	}); 
}
load()


function load2(){
	$(".left-button").click(function(){
	    	$(".load-bar").addClass('load-bar3');
	}); 
}
load2()
.container-slider{
	width: 328px;
	height: 458px;
	position: relative;
	display: table;
}

.container-slider .box-bg-slider{
	width: 328px;
	height: 308px;
	background-color: #341463;
	position: absolute;
	left: 50px;
	top: 41.5px;
}

.container-slider .box-bordered{
	width: 318px;
	height: 298px;
	background-color: transparent;
	border: 5px solid #FF005D;
	position: absolute;
	left: 90px;
	top: 0px;
}

.container-slider .slider{
	width: 328px;
	height: 368px;
	position: absolute;
	left: 0px;
	top: 80px;
}

.container-slider .images-slider{
	width: 328px;
	height: 355px;
	background-color: #ededed;
	overflow: hidden;
}

.container-slider .images-slider img{
	width: 100%;
	height: auto;
}

.load-bar-container{
	width: 328px;
	height: 4px;
	margin-top: 10px; 
	background-color: #ededed;
	border-radius: 100px;
	overflow: hidden;
}

.load-bar{
	width: 30%;
	height: 4px;
	background-color: #341463;
	-webkit-animation: load linear 3s;
      animation: load linear 3s;
  	-webkit-animation-iteration-count: no-repeat;
      animation-iteration-count: no-repeat;
}

@keyframes load{
  0% {
   width: 1%;  
  }
  50% {
    width: 30%;
  }
}

.load-bar2{
	width: 60%;
	height: 4px;
	background-color: #341463;
	-webkit-animation: loadR linear 3s;
      animation: loadR linear 3s;
  	-webkit-animation-iteration-count: no-repeat;
      animation-iteration-count: no-repeat;
}

@keyframes loadR {
  0% {
   width: 30%;  
  }
  50% {
    width: 60%;
  }
}

.load-bar3{
	width: 1%;
	height: 4px;
	background-color: #341463;
	-webkit-animation: loadL linear 3s;
      animation: loadL linear 3s;
  	-webkit-animation-iteration-count: no-repeat;
      animation-iteration-count: no-repeat;
}

@keyframes loadL {
  0% {
   width: 30%;  
  }
  50% {
    width: 1%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-slider">
				<div class="box-bg-slider"></div>
				<div class="box-bordered"></div>
				<!-- Slider -->
				<div class="slider">
					<div class="images-slider">
						<img class="mySlides animate-opacity"  src="https://www.playosmo.com/images/games/numbers/tiles/4fd2499.numbers-tile-9.png" alt="">
						<img class="mySlides animate-opacity"  src="https://carwad.net/sites/default/files/images-numbers-109750-8986472.png" alt="">
						<img class="mySlides animate-opacity"  src="https://www.playosmo.com/images/games/numbers/tiles/78dbcf2.numbers-tile-5.png" alt="">
					</div>
					<div class="load-bar-container">
						<div class="load-bar"></div>
					</div>
					<div class="nav-slider">
						<div class="left-button">
							<button class="arrow"  style="margin: 1px 7px;" onclick="plusDivs(-1)">&#10094;</button></div>
						<div class="right-button">
							<button class="arrow" style="margin: 1px 8px;" onclick="plusDivs(1)">&#10095;</button>
						</div>
					</div>
				</div>
			</div>

1 respuesta 1

0

Te dejo el boton derecho funcionando. Para el boton izquierdo vas a necesitar mas logica y mas animaciones.

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(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 load(){
	$(".right-button").click(function(){
      var loadBar = $(".load-bar");
      loadBar.removeClass();
      loadBar.addClass('load-bar');
      if (slideIndex == 1) {
	      $(".load-bar").addClass('load-bar');
      } else {
        $(".load-bar").addClass('load-bar' + slideIndex);
      }
	}); 
}
load()


function load2(){
	$(".left-button").click(function(){
	    var loadBar = $(".load-bar");
      loadBar.removeClass();
      loadBar.addClass('load-bar');
      if (slideIndex == 1) {
	      $(".load-bar").addClass('load-bar');
      } else {
        $(".load-bar").addClass('load-bar' + slideIndex);
      }
	}); 
}
load2()
.container-slider{
	width: 328px;
	height: 458px;
	position: relative;
	display: table;
}

.container-slider .box-bg-slider{
	width: 328px;
	height: 308px;
	background-color: #341463;
	position: absolute;
	left: 50px;
	top: 41.5px;
}

.container-slider .box-bordered{
	width: 318px;
	height: 298px;
	background-color: transparent;
	border: 5px solid #FF005D;
	position: absolute;
	left: 90px;
	top: 0px;
}

.container-slider .slider{
	width: 328px;
	height: 368px;
	position: absolute;
	left: 0px;
	top: 80px;
}

.container-slider .images-slider{
	width: 328px;
	height: 355px;
	background-color: #ededed;
	overflow: hidden;
}

.container-slider .images-slider img{
	width: 100%;
	height: auto;
}

.load-bar-container{
	width: 328px;
	height: 4px;
	margin-top: 10px; 
	background-color: #ededed;
	border-radius: 100px;
	overflow: hidden;
}

.load-bar{
	width: 30%;
	height: 4px;
	background-color: #341463;
	-webkit-animation: load linear 3s;
      animation: load linear 3s;
  	-webkit-animation-iteration-count: no-repeat;
      animation-iteration-count: no-repeat;
}

@keyframes load{
  0% {
   width: 1%;  
  }
  50% {
    width: 30%;
  }
}

.load-bar2{
	width: 60%;
	height: 4px;
	background-color: #341463;
	-webkit-animation: loadR linear 3s;
      animation: loadR linear 3s;
  	-webkit-animation-iteration-count: no-repeat;
      animation-iteration-count: no-repeat;
}

@keyframes loadR {
  0% {
   width: 30%;  
  }
  50% {
    width: 60%;
  }
}

.load-bar3{
	width: 100%;
	height: 4px;
	background-color: #341463;
	-webkit-animation: loadL linear 3s;
      animation: loadL linear 3s;
  	-webkit-animation-iteration-count: no-repeat;
      animation-iteration-count: no-repeat;
}

@keyframes loadL {
  0% {
   width: 60%;  
  }
  50% {
    width: 100%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-slider">
				<div class="box-bg-slider"></div>
				<div class="box-bordered"></div>
				<!-- Slider -->
				<div class="slider">
					<div class="images-slider">
						<img class="mySlides animate-opacity"  src="https://www.playosmo.com/images/games/numbers/tiles/4fd2499.numbers-tile-9.png" alt="">
						<img class="mySlides animate-opacity"  src="https://carwad.net/sites/default/files/images-numbers-109750-8986472.png" alt="">
						<img class="mySlides animate-opacity"  src="https://www.playosmo.com/images/games/numbers/tiles/78dbcf2.numbers-tile-5.png" alt="">
					</div>
					<div class="load-bar-container">
						<div class="load-bar"></div>
					</div>
					<div class="nav-slider">
						<div class="left-button">
							<button class="arrow"  style="margin: 1px 7px;" onclick="plusDivs(-1)">&#10094;</button></div>
						<div class="right-button">
							<button class="arrow" style="margin: 1px 8px;" onclick="plusDivs(1)">&#10095;</button>
						</div>
					</div>
				</div>
			</div>

1
  • Gracias por tu aporte alanfcm, espero que alguien pueda ayudarme con el boton izquierdo! Commented el 18 oct. 2018 a las 21:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.