Adding swip functionallty to flex items on mobile

Viewed 312

I have a simple flex container with 3 items next to each other, on mobile version i want to keep the same layout and instead of changing the flex direction to column, i want to keep them next to teach others and add swipe to see next items

Example with images

On Desktop ( which is fine i know how to do that ) enter image description here

On mobile ( i want to keep them next to each other and swipe on screen to see next items) enter image description here

html

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>

css

.parent {
  width: 98vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.child {
  width: 33%;  
  height: 500px;
  background: black;
}

Real example https://mouthwash.co/

On Desktop enter image description here

On mobile ( so i have to swipe to see the other items )

enter image description here

0 Answers
Related