***************************** CODIGO JAVA SCRIPT ******************************

let indice = 1;
muestraSlides(indice);

function avanzaSlide(n) {
muestraSlides((indice += n));
}

function posicionSlide(n) {
muestraSlides((indice = n));
}
//scroll automatico
setInterval(function tiempo(){
muestraSlides(indice+=1)
},15000);

function muestraSlides(n) {
let i;
let slides = document.getElementsByClassName('miSlider');
let barras = document.getElementsByClassName('barra');

if (n > slides.length) {
indice = 1;
}

if (n < 1) {
indice = slides.length;
}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = 'none';
}
for (i = 0; i < barras.length; i++) {
barras[i].className = barras[i].className.replace(' active', '');
}

slides[indice - 1].style.display = 'block';

barras[indice - 1].className += ' active';
}

*********************************** CSS ****************************************

/* SECCIÓN SLIDER HISTORIA*/
.hist-cont {
background: var(--fondo);
margin-bottom: var(--margenes);
}

.slide-contenedor {
max-width: 100%;
max-height: 85vh;
width: 95%;
position: relative;
overflow: hidden;
margin: auto;
}

.miSlider img {
width: 100%;
max-height: 88vh;
height: inherit;
object-fit: cover;
background: fixed;
vertical-align: top;
transition: 2s;
}

.direcciones {
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
}

.direcciones a {
color: #fff;
display: inline-block;
padding: 20px;
text-decoration: none;
}

.direcciones a:hover {
background: rgba(48, 121, 190, 0.5);
transition: 0.5s;
}

.barras {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 15px;
}

.barra {
cursor: pointer;
height: 2px;
width: 25px;
margin: 0 2px;
background: #2c3131;
display: inline-block;
margin-left: 3px;
}

.active {
background-color: var(--blue1);
}

.fade {
 animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}

********************************* HTML *****************************************

<section class="hist-cont" id="historia">

<h2 class="titulo-seccion">HISTORIA</h2>
<section class="slide-contenedor">
<div class="miSlider fade">
<img src="img/b-ed.jpg" alt="" />
</div>
<div class="miSlider fade">
<img src="img/b2.jpg" alt="" />
</div>
<div class="miSlider fade">
<img src="img/b3-ed.jpg" alt="" />
</div>
<div class="miSlider fade">
<img src="img/b4.jpg" alt="" />
</div>
<div class="miSlider fade">
<img src="img/b5.jpg" alt="" />
</div>
<div class="miSlider fade">
<img src="img/b6.jpg" alt="" />
</div>
<div class="direcciones">
<a href="#barras" class="atras" onclick="avanzaSlide(-1)"
>&#10094;</a
>
<a href="#barras" class="adelante" onclick="avanzaSlide(1)"
>&#10095;</a
>
</div>
<div class="barras">
<span class="barra active" onclick="posicionSlide(1)"></span>
<span class="barra" onclick="posicionSlide(2)"></span>
<span class="barra" onclick="posicionSlide(3)"></span>
<span class="barra" onclick="posicionSlide(4)"></span>
<span class="barra" onclick="posicionSlide(5)"></span>
<span class="barra" onclick="posicionSlide(6)"></span>
</div>
</section>
</section>