JS - Slider automático en lugar específico

 Slider automático con javascript con botones

Código para pegar para tu sitio web.

<!------ SLIDER AUTOMÁTICO ------>

<div id="slider_unknowns">

      <div id="driver_car">

       

        <div class="buttons">

          <button id="prev"><i class="fas fa-arrow-left"></i></button>

          <button id="next"><i class="fas fa-arrow-right"></i></button>

        </div>

        <div class="slider">

          <div class="slide current">

            <h4 style="margin-bottom: 20px;">Gato Jujuy de los Andes</h4>

          </div>

          <div class="slide">

            <h4 style="margin-bottom: 20px;">Musaraña elefante</h4>

          </div>

          <div class="slide">

            <h4 style="margin-bottom: 20px;">Mono de Myanmar</h4>

          </div>

          <div class="slide">

            <h4 style="margin-bottom: 20px;">Aye aye</h4>

          </div>

          <div class="slide">

            <h4 style="margin-bottom: 20px;">Antilope saiga</h4>

          </div>

        </div>

      </div>

</div>

/****** SLIDER AUTOMÁTICO ******/

#slider_unknowns{

  width: 100%;

  height: 90vh;

  background: rgb(255, 255, 255);

  display: flex;

  align-items: center;

  justify-content: center;

}

#driver_car{

    width: 100%;

    height: 80vh;

    display: flex;

    align-content: center;

    justify-content: center;

    position: absolute;

    z-index: 0;

    margin: 50px 0px;

}

.slider {

    width: 70%;

    height: 100%;

    position: relative;

    z-index: 1;

  }

  .slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: opacity 0.4s ease-in-out;

   

    display: flex;

    align-items: flex-end;

    justify-content: center;

  }

  .slide.current {

    opacity: 1;

  }

  .buttons button#next {

    position: absolute;

    top: 40%;

    right: 25px;

    z-index: 2;

  }

 

  .buttons button#prev {

    position: absolute;

    top: 40%;

    left: 25px;

    z-index: 2;

  }

 

  .buttons button {

    border: 2px solid #fff;

    background-color: rgb(0, 140, 255);

    color: rgb(255, 255, 255);

    cursor: pointer;

    padding: 13px 15px;

    border-radius: 50%;

    outline: none;

  }

 

  .buttons button:hover {

    background-color: rgb(0, 161, 13);

    color: #333;

  }

// SLIDER AUTOMÁTICO

const slides = document.querySelectorAll('.slide');

const next = document.querySelector('#next');

const prev = document.querySelector('#prev');

const auto = true; // Auto scroll

const intervalTime = 5000;

let slideInterval;

const nextSlide = () => {

  // Get current class

  const current = document.querySelector('.current');

  // Remove current class

  current.classList.remove('current');

  // Check for next slide

  if (current.nextElementSibling) {

    // Add current to next sibling

    current.nextElementSibling.classList.add('current');

  } else {

    // Add current to start

    slides[0].classList.add('current');

  }

  setTimeout(() => current.classList.remove('current'));

};

const prevSlide = () => {

  // Get current class

  const current = document.querySelector('.current');

  // Remove current class

  current.classList.remove('current');

  // Check for prev slide

  if (current.previousElementSibling) {

    // Add current to prev sibling

    current.previousElementSibling.classList.add('current');

  } else {

    // Add current to last

    slides[slides.length - 1].classList.add('current');

  }

  setTimeout(() => current.classList.remove('current'));

};

// Button events

next.addEventListener('click', e => {

  nextSlide();

  if (auto) {

    clearInterval(slideInterval);

    slideInterval = setInterval(nextSlide, intervalTime);

  }

});

prev.addEventListener('click', e => {

  prevSlide();

  if (auto) {

    clearInterval(slideInterval);

    slideInterval = setInterval(nextSlide, intervalTime);

  }

});

// Auto slide

if (auto) {

  // Run next slide at interval time

  slideInterval = setInterval(nextSlide, intervalTime);

};