Wednesday

CSS Scroll-snap

Issue

I'm trying to build a simple carousel using scroll-snap and I would like the to start with the first picture. The element is randomly scrolling on load and not positionning on the first picture. Code below. Any clue ?

    
        .carousel {
            display: flex;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
            width: 80%;
        } 
        .carousel-img{
            scroll-snap-align: start;
            width: 200px;
        }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>

    </style>
    <body>
        
    <div class="carousel">
        <img class="carousel-img" src="https://picsum.photos/300" alt="">
        <img class="carousel-img" src="https://picsum.photos/301" alt="">
        <img class="carousel-img" src="https://picsum.photos/302" alt="">
        <img class="carousel-img" src="https://picsum.photos/303" alt="">
        <img class="carousel-img" src="https://picsum.photos/304" alt="">
        <img class="carousel-img" src="https://picsum.photos/305" alt="">
        <img class="carousel-img" src="https://picsum.photos/306" alt="">
        <img class="carousel-img" src="https://picsum.photos/307" alt="">
        <img class="carousel-img" src="https://picsum.photos/308" alt="">
        <img class="carousel-img" src="https://picsum.photos/309" alt="">
        <img class="carousel-img" src="https://picsum.photos/310" alt="">
        <img class="carousel-img" src="https://picsum.photos/311" alt="">
        <img class="carousel-img" src="https://picsum.photos/312" alt="">
        <img class="carousel-img" src="https://picsum.photos/313" alt="">
        <img class="carousel-img" src="https://picsum.photos/314" alt="">
        <img class="carousel-img" src="https://picsum.photos/315" alt="">
        <img class="carousel-img" src="https://picsum.photos/316" alt="">
    </div>
    
    </body>
    </html>

Solution

The problem here is, that the images are pushing the scrollbar when they are being loaded.
And on top of that, not all images are being loaded at the same speed (some are larger, some smaller in file size) and therefore add some randomness to it.

A simple solution would be to wrap your images with another <div>, give it the same width as the images and also add the scroll-snap-align to it.

One Slide would look as following:

<div class="carousel-slide">
    <img class="carousel-img" src="https://picsum.photos/308" alt="">
</div>

From your .carousel-img{} the scroll-snap-align would be removed:

.carousel-img {
  width: 200px;
}

And for the new <div> we add the following styles:

.carousel-slide {
  scroll-snap-align: start;
  width: 200px;
}

Full example:

.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  width: 80%;
}

.carousel-img {
  width: 200px;
}

.carousel-slide {
  scroll-snap-align: start;
  width: 200px;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <style>

  </style>

  <body>

    <div class="carousel">
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/300" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/301" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/302" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/303" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/304" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/305" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/306" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/307" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/308" alt="">
      </div>
      <div class="carousel-slide">
        <img class="carousel-img" src="https://picsum.photos/309" alt="">
      </div>
    </div>

  </body>

</html>

Answered By - Alex Berger

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Wednesday

CSS Scroll-snap

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels