html ,medien bzw fotoslider?

<div class="slider">
<div class="slide">
<img src="bilder (1).jpg" alt="Bild 1">
</div>
<div class="slide">
<img src="bilder (2).jpg" alt="Bild 2">
</div>
<div class="slide">
<img src="bilder (3).jpg" alt="Bild 3">
</div>
   
</div>
<button class="prev" id="b1">←</button>
<button class="next" id="b2">→</button>

HIER IST DER CSS TEIL

.slider {
  display: flex;
  overflow: hidden;
  width: 100%;
  transition: transform 0.3s ease;
}
.slide {
  flex: 0 0 100%;
}
img {
  max-width: 30vw;
  height: auto;
}
#b1 {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
   
  top: 100%;
  transform: translateY(-50%);
  z-index: 1;
}
#b2 {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
   
  top: 100%;
  transform: translateY(-50%);
  z-index: 1;
}
.prev {
  left: 10px;
}
.next {
  right: 10px;
}

HIER IST DER JAVA TEIL

const slider = document.querySelector('.slider');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
let currentIndex = 0;
prevButton.addEventListener('click', () => {
  currentIndex = Math.max(currentIndex - 1, 0);
  updateSlider();
});
nextButton.addEventListener('click', () => {
  currentIndex = Math.min(currentIndex + 1, slider.children.length - 1);
  updateSlider();
});
function updateSlider() {
  const translateX = -currentIndex * 100 + '%';
  slider.style.transform = `translateX(${translateX})`;
}
updateSlider(); 

also... HALLO erstmal.. ich hab das problem dass wenn ich das nächte Bild nach rechts anpeilen will, einfach keins erscheint. das erste bild swiped nach links und ich kann es auch wieder holen. Trotzdem laden die anderen nicht :/
Bitte um seelische und physikalische unterstützung :Þ

Answer 1

[Verelat777]

Der Grund, weshalb das nächste Bild nicht erscheint, ist overflow: hidden, wodurch die Bilder außerhalb des sichtbaren Bereichs von .slider abgeschnitten werden. Wenn man overflow: hidden entfernt, wird es funktionieren.

Füge unter .slider ein zusätzliches Wrapper-Element ein (.slider-wrapper), um zu dies verhindern:

<div class="slider">
    <div class="slider-wrapper">
        <div class="slide">…</div>
        <div class="slide">…</div>
        <div class="slide">…</div>
    </div>
</div>

Im CSS überträgst Du die Eigenschaften von .slider außer overflow: hidden auf .slider-wrapper:

.slider-wrapper {
    display: flex;
    width: 100%;
    transition: transform 0.3s ease;
}

Das übergeordnete Element .slider erhält dann overflow: hidden:

.slider {
    overflow: hidden;
}

Im JavaScript muss .slider in .slider-wrapper geändert werden:

const slider = document.querySelector(".slider-wrapper");

JSFiddle: https://jsfiddle.net/0pj14swu/