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)">❮</button></div>
<div class="right-button">
<button class="arrow" style="margin: 1px 8px;" onclick="plusDivs(1)">❯</button>
</div>
</div>
</div>
</div>