国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Ich versuche, ein einfaches ?haupts?chlich CSS“-Bildkarussell zu erstellen, das Scroll-Snap-Funktion verwendet, aber auch über Navigationsschaltfl?chen zur Steuerung der aktuell angezeigten Folie verfügt. Die einzige L?sung, die ich gefunden habe, besteht darin, scrollIntoView() für das Zielelement zu verwenden, was das tut, was ich will, aber auch das Zielelement immer an den oberen Rand der Seite scrollt. Ich m?chte, dass die Zielkarussellfolie und der Container dort bleiben, wo sie sind, und ich m?chte, dass die Folie nur horizontal in die Ansicht scrollt. Ich habe mir ein Beispiel von Adam Argyle angesehen und er hat genau das getan und der Container blieb in seiner ursprünglichen Position. Ich wei? nicht, was an seiner Demonstration anders war.

Zur Demonstration habe ich einen Codepen gebaut.

https://codepen.io/krjo-the-decoder/pen/dyjPrLy

Durch Klicken auf die nummerierte Schaltfl?che unten wird korrekt zur rechten Folie gescrollt und au?erdem wird der gesamte Container über die Seite gescrollt.

Ich habe versucht, scrollTo() vor und nach scrollIntoView() zu verwenden, um den Y-Achsen-Scroll des Containers auf seine bestehende Position zu setzen, aber das hatte keine Auswirkung.

<!-- Using tailwind.css -->
<div class="py-48 bg-gray-200">
  <h1 class="text-center font-bold mb-5 text-2xl">Scroll-snap Carousel</h1>
  <div class="grid grid-flow-col overflow-x-auto snap-x snap-mandatory overscroll-x-contain auto-cols-[100%] mx-auto w-[500px]">
    <img src="https://via.placeholder.com/500" width="500" height="500" class="block snap-center w-auto h-auto" data-slide>
    <img src="https://via.placeholder.com/500" width="500" height="500" class="block snap-center w-auto h-auto" data-slide>
    <img src="https://via.placeholder.com/500" width="500" height="500" class="block snap-center w-auto h-auto" data-slide>
    <img src="https://via.placeholder.com/500" width="500" height="500" class="block snap-center w-auto h-auto" data-slide>
  </div>
  <nav class="flex justify-center mt-4">
    <button class="p-2 border rounded-full border-solid border-black w-12 h-12 mx-2" type="button" data-index="0">1</button>
    <button class="p-2 border rounded-full border-solid border-black w-12 h-12 mx-2" type="button" data-index="1">2</button>
    <button class="p-2 border rounded-full border-solid border-black w-12 h-12 mx-2" type="button" data-index="2">3</button>
    <button class="p-2 border rounded-full border-solid border-black w-12 h-12 mx-2" type="button" data-index="3">4</button>
  </nav>
</div>

<script>
const slides = document.querySelectorAll('[data-slide]');
document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', event => {
    console.log('event',event);
    slides[event.target.dataset.index].scrollIntoView({
      behavior: 'smooth',
      inline:   'center',
    });
  });
});
</script>