CODEWITHSUNDEEP
htmlcss
Liu Hantao
Liu Hantao

Reputation: 636

I have some problem on scroll snap points with my CSS

I am trying to make the snap effects with my slides, but the scroll snap effect doesn't work here with my CSS

I already tried putting display: inline; inside my inner div in CSS.

<div id="projects">
    <h2 class="heading">Projects</h2>
        <div class="slider">
            <div class="slide" id="slide-1">
                1
            </div>
            <div class="slide" id="slide-2">
                2
            </div>
            <div class="slide" id="slide-3">
                3
            </div>
            <div class="slide" id="slide-4">
                4
            </div>
            <div class="slide" id="slide-5">
                5
            </div>
        </div>
    </div>

#projects{
    padding:50px 15px;
    border-bottom:1px solid #dcd9d9;
    text-align:center;
}

.slider {
    width: 100%;
    height: 550px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-white-space: nowrap;
    white-space: nowrap;
    -webkit-scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-x: repeat(100%);
    scroll-snap-type: mandatory;
    scroll-snap-points-x: repeat(100%);
}

.slide {
    width: 100%;
    height: 550px;
    flex-shrink: 0;
    display: inline;
}

#slide-1 {
    position: relative;
    background-image: url(../images/1.jpg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

#slide-2 {
    position: relative;
    background-image: url(../images/2.jpg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

#slide-3 {
    position: relative;
    background-image: url(../images/3.jpg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

#slide-4 {
    position: relative;
    background-image: url(../images/4.jpeg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

#slide-5 {
    position: relative;
    background-image: url(../images/5.jpg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

The website works like as if you have a long picture, and you can scroll it all the way to the right, I have five here. But it doesn't have that effect which you scroll it a little bit, it then goes from first to second. I am trying to make the snap effect.

Upvotes: 3

Views: 107

Answers (1)

kabuk1
kabuk1

Reputation: 26

scroll-snap-type-x: is non-standard and often won't work. See here. And you need to set the snap points on the child elements.

.slider {
  //supported way to set snap mandatory on the horizontal axis
  scroll-snap-type: x mandatory;
  -webkit-scroll-snap-type: x mandatory;
}

.slide {
  //snap align center
  scroll-snap-align: center;

  //force stop on each element
  scroll-snap-stop: always;
}

Upvotes: 1

Related Questions