Slide with javascript load bar

Navigation
1

I have a gallery of images that change with the buttons but I need that as the images progress the loading bar increases or decreases depending on the direction you want, so far I carry the following code but I do not know how to do it that the navigation bar works at all times, I appreciate your valuable help! 

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>
    
asked by Anderson Rodríguez 18.10.2018 в 23:12
source

1 answer

0

I leave the right button working. For the left button you will need more logic and more animations. 

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>
    
answered by 18.10.2018 / 23:32
source
How do I apply polymorphism to a data set [closed] Generate Json in PHP with mysql data