JavaScript Probleme bei selbstgeschriebenem carousel

[PvcZ]

Hi,

ich dachte mir ich bastel mir ein eigenes Slider Carousel wie OwlCarousel oder Slick, da mir letztere zuviele Resourcen benötigen.

Aktuell siehts so aus:

const testimonials = document.querySelector(".testimonials");
const scroller = testimonials.querySelector(".scroller");
const nextBtn = testimonials.querySelector(".btn.next");
const prevBtn = testimonials.querySelector(".btn.prev");
const itemWidth = testimonials.querySelector(".item").clientWidth;

nextBtn.addEventListener("click", scrollToNextItem);
prevBtn.addEventListener("click", scrollToPrevItem);

function scrollToNextItem() {
  if (scroller.scrollLeft < scroller.scrollWidth - itemWidth)
    // The scroll position is not at the beginning of last item
    scroller.scrollBy({ left: itemWidth, top: 0, behavior: "smooth" });
  // Last item reached. Go back to first item by setting scroll position to 0
  else scroller.scrollTo({ left: 0, top: 0, behavior: "smooth" });
}
function scrollToPrevItem() {
  if (scroller.scrollLeft != 0)
    // The scroll position is not at the beginning of first item
    scroller.scrollBy({ left: -itemWidth, top: 0, behavior: "smooth" });
  // This is the first item. Go to last item by setting scroll position to scroller width
  else
    scroller.scrollTo({
      left: scroller.scrollWidth,
      top: 0,
      behavior: "smooth",
    });
}

/*SECTION Testemonials*/
.review {
  margin-bottom: 170px;
}
.testimonials > * {
  margin: 0;
  padding: 0;
}
.testimonials {
  max-width: 900px;
  margin: auto;
  padding: 15px;
  text-align: center;
  position: relative;
}
.scroller {
  margin: 0;
  padding: 0;
  overflow-x: scroll;
  display: flex;
  scroll-snap-type: x mandatory;
}
.item {
  min-width: 100%;
  scroll-snap-align: center;
  background-color: var(--bg-color);
  margin-bottom: 10px;
  padding: 0 10px;
}
.card {
  background-color: var(--blue);
  padding: 40px 40px 40px;
  border-radius: var(--border-radius);
  z-index: 1;
  min-height: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card p {
  font-style: italic;
  line-height: 1.5;
  font-size: 20px;
  color: var(--white);
}
.card span {
  display: block;
  margin-top: 20px;
  color: var(--white);
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.testimonials .btn {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.53);
  z-index: 1;
  line-height: 30px;
  text-align: center;
  color: white;
  font-weight: bold;
}
.testimonials .btn:hover {
  background-color: rgba(95, 106, 117, 0.5);
  color: var(--blue);
}
.testimonials .btn.next {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
}
.testimonials .btn.prev {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 480px) {
  .item {
    padding: 0 10px;
  }
  .card {
    padding: 30px 30px 30px;
  }
}

 <section class="review">
    <h2>Erfahrungsberichte</h2>
    <div class="testimonials">
      <div class="scroller">
        <div class="item">
          <div class="card">
            <p>
            Bibiijasdiajsiodasd
            </p>
            <span>Elise</span>
          </div>
        </div>
        <div class="item">
          <div class="card">
            <p>
       Blablablabla
            </p>
            <span>John</span>
          </div>
        </div>
        <div class="item">
          <div class="card">
            <p>
              Hier steht eine menge text blasdkasdjlaksjdö
            </p>
            <span>Anton</span>
          </div>
        </div>
      </div>
      <span class="btn prev"></span>
      <span class="btn next"></span>
    </div>
  </section>

Das komische ist nun, dass es manchmal funktioniert, wenn ich auf den Button klicke <span class="btn prev"></span> (ja ich weiß sollte ein <button> sein) aber manchmal hüpft er mir gleich ganz ans Ende der Elemente. Teilweise kommt mir vor es hängt davon ab ob mein Browserfenster maximiert oder nicht maximiert ist... Falls jemand eine schlanke fertige Variante kennt würd ich mich natürlich auch freuen aber wenn der eigene Fehler gefunden werden würde wärs natürlich vom Lerneffekt noch besser

 

[tollertyp]

Es gibt Seiten, da kannst du die kompletten Code-Schnipsel hochladen, das würde es wohl einfacher machen, z.B. https://jsfiddle.net/ - gibt sicher auch andere.

 

[PvcZ]

Vielen Dank für den Hinweis!
Ich hab das nun mal gemacht https://jsfiddle.net/uz1gbqjy/

Komischerweise gehts hier nun...

 

[tollertyp]

Komisch :-)