Breaking News: Grepper is joining You.com. Read the official announcement!

css scroll snap carousel

Prickly Pigeon answered on September 15, 2022 Popularity 7/10 Helpfulness 3/10

answer css scroll snap carousel

css scroll snap carousel

Comment

#carousel {
  /* Ensure that the contents flow horizontally */
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

#carousel.vertical {
  flex-direction: column;
}

/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}

#carousel.snap > div {
  scroll-snap-align: center;
}

#carousel.snap.vertical {
  flex-direction: column;
  scroll-snap-type: y mandatory;
}



/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
  scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(100%);
  -ms-scroll-snap-points-x: repeat(100%);
}

#carousel.snap.vertical {
  scroll-snap-points-x: initial;
  -ms-scroll-snap-points-x: initial;
  scroll-snap-points-y: repeat(100%);
  -ms-scroll-snap-points-y: repeat(100%);
}


/* Below here is styling, not important for the actual example, just to make it look nice. No need to look down here! */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

#carousel > div {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

#carousel-1 {
  background-color: #e34747;
}

#carousel-2 {
  background-color: #5ab92c;
}

#carousel-3 {
  background-color: #226de2;
}

#controls {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

#controls button {
  padding: 5px 10px;
}

Popularity 7/10 Helpfulness 3/10 Language css

Source: www.codingninjas.com

Tags: carousel css scroll-snap

Link to this answer
Share Copy Link

Contributed on Sep 15 2022

Prickly Pigeon

0 Answers Avg Quality 2/10

css scroll snap carousel

Contents

More Related Answers

css scroll snap carousel

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.