Heute zeige ich euch wie ihr einen responsiven Slider von Grund auf neu programmieren könnt. Ich zeige euch alle Schritte wie ihr so ein Bilderwechsel hinbekommt und auch wie ihr so eine Navigation einbauen könnt.

Perfekt für eure Webseite oder um den Grundaufbau zu verstehen.

Video

HTML

<div class="img-slider">
      <div class="slide active">
        <img src="img/abend.jpg" />
        <div class="info">
          <h2>Slide 1</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dicta
            aperiam doloribus vero laboriosam, laborum blanditiis minima debitis
            architecto ex nam beatae consectetur libero non velit quo dolore.
          </p>
        </div>
      </div>
      <div class="slide">
        <img src="img/controller.jpg" />
        <div class="info">
          <h2>Slide 2</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dicta
            aperiam doloribus vero laboriosam, laborum blanditiis minima debitis
            architecto ex nam beatae consectetur libero non velit quo dolore.
          </p>
        </div>
      </div>
      <div class="slide">
        <img src="img/hand.jpg" />
        <div class="info">
          <h2>Slide 3</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dicta
            aperiam doloribus vero laboriosam, laborum blanditiis minima debitis
            architecto ex nam beatae consectetur libero non velit quo dolore.
          </p>
        </div>
      </div>
      <div class="slide">
        <img src="img/vogel.jpg" />
        <div class="info">
          <h2>Slide 4</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dicta
            aperiam doloribus vero laboriosam, laborum blanditiis minima debitis
            architecto ex nam beatae consectetur libero non velit quo dolore.
          </p>
        </div>
      </div>
      <div class="navigation">
        <div class="btn active"></div>
        <div class="btn"></div>
        <div class="btn"></div>
        <div class="btn"></div>
      </div>
    </div>

CSS

:root {
  --dark: #1d212b;
  --hell: #fff;
  --glas: rgba(0, 0, 0, 0.2);
  --btn: rgba(255, 255, 255, 0.5);
  --active: #2696e9;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: var(--dark);
}

.img-slider {
  position: relative;
  width: 800px;
  height: 500px;
  margin: 10px;
  background: var(--dark);
}

.img-slider .slide {
  position: absolute;
  width: 100%;
  z-index: 1;

  /*
  clip-path: circle(0% at 0 50%);
  */
  display: none;
}

.img-slider .slide.active {
  /*
  clip-path: circle(150% at 0 50%);
  transition-property: clip-path;
  */
  display: block;
  transition: 1s;
}

.img-slider .slide img {
  width: 100%;
  border-radius: 5px;
  z-index: 1;
}

.img-slider .slide .info {
  position: absolute;
  top: 0;
  padding: 15px 30px;
}

.img-slider .slide .info h2 {
  color: var(--hell);
  font-size: 45px;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.img-slider .slide .info p {
  color: var(--hell);
  background: var(--glas);
  font-size: 16px;
  width: 60%;
  padding: 10px;
  border-radius: 5px;
}

.img-slider .navigation {
  position: absolute;
  display: flex;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.img-slider .navigation .btn {
  background: var(--btn);
  width: 12px;
  height: 12px;
  margin: 10px;
  border-radius: 50%;
  cursor: pointer;
}

.img-slider .navigation .btn.active {
  background: var(--active);
}

@media (max-width: 820px) {
  .img-slider {
    width: 600px;
    height: 375px;
  }
  .img-slider .slide .info {
    padding: 10px 25px;
  }
  .img-slider .slide .info h2 {
    font-size: 35px;
  }
  .img-slider .slide .info p {
    width: 90%;
    font-size: 15px;
  }

  .img-slider .navigation {
    bottom: 35px;
  }

  .img-slider .navigation .btn {
    width: 10px;
    height: 10px;
    margin: 8px;
  }
}

@media (max-width: 620px) {
  .img-slider {
    width: 400px;
    height: 250px;
  }
  .img-slider .slide .info {
    padding: 10px 20px;
  }
  .img-slider .slide .info h2 {
    font-size: 30px;
  }
  .img-slider .slide .info p {
    width: 95%;
    font-size: 13px;
  }

  .img-slider .navigation {
    bottom: 25px;
  }

  .img-slider .navigation .btn {
    width: 7px;
    height: 7px;
    margin: 6px;
  }
}

@media (max-width: 420px) {
  .img-slider {
    width: 320px;
    height: 200px;
  }
  .img-slider .slide .info {
    padding: 5px 15px;
  }
  .img-slider .slide .info h2 {
    font-size: 25px;
  }
  .img-slider .slide .info p {
    width: 98%;
    font-size: 12px;
  }

  .img-slider .navigation {
    bottom: 20px;
  }

  .img-slider .navigation .btn {
    width: 7px;
    height: 7px;
    margin: 6px;
  }
}

Javascript

var slides = document.querySelectorAll('.slide');
var btns = document.querySelectorAll('.btn');
let currentSlide = 1;



var manualNav = function(manual){
    slides.forEach((slide) => {
        slide.classList.remove('active');

        btns.forEach((btn) => {
            btn.classList.remove('active');
        })

    })

    slides[manual].classList.add('active');
    btns[manual].classList.add('active');

    
}

btns.forEach((btn,i) => {
    btn.addEventListener("click", () => {
        manualNav(i);
        currentSlide = i;
    })
})


// Autoplay-Funktion
var repeat = function(){
    setInterval(() => {
        currentSlide++;

        if(currentSlide >= slides.length){
            currentSlide = 0;
        }

        manualNav(currentSlide);
    }, 3000);
}


repeat();