JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="slide_container">
<div id="slider" class="slider">
<div class="slide" id="s1">1</div>
<div class="slide" id="s2">2</div>
<div class="slide" id="s3"><div id="example1"></div></div>
<div class="slide" id="s4"><div id="example2"></div></div>
<div class="slide" id="s5">5</div>
<div class="slide" id="s6">6</div>
</div>
<div class="control"><span id="prev">prev</span> <span id="next">next</span></div>
</div>

CSS

.slide_container {max-width:400px;margin:auto;position:relative;padding-bottom:40px;}

.control {position:absolute;bottom:0;left:0;width:100%;height:40px;background-color:pink;}
  
  .slider {display: flex; 
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width:100%;margin:auto;position:relative;
  overflow:hidden;}
 
  
  .slider > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  margin-right: 0px;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height:400px;
  
  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    align-content: stretch;
}

.slide_container .slider .slide:nth-child(even) {background-color: #eeeeee;}
.slide_container .slider .slide:nth-child(odd) {background-color: #dedede;}


.slide {width:100%;display:inline-block;}

#example1 {background-color:blue;height:300px;}
#example2 {background-color:cyan;height:600px;}

JavaScript

function id(x) {var y = document.getElementById(x);return y;}
let slideNo = id("slider").children.length;
var position = 1;
var margin = 0;

id("next").addEventListener("click", function() {
if (position == slideNo) {}
else {margin = (margin + 100);id("s1").style.marginLeft = "-" + margin + "%";position = (position + 1);}
});

id("prev").addEventListener("click", function() {
if (position == 1) {}
else {margin = (margin - 100);id("s1").style.marginLeft = "-" + margin + "%";position = (position - 1);}
});