JSFiddle - React, Tailwind, and code Playground

by scurrilus

HTML

<div class="flexbox-wrapper">
  <div class="swipe-button" data-direction="left">
    <
  </div>
  <div class="swipe-button" data-direction="right">
    >
  </div>
  <div class="flexbox-panel">
    <div class="flexbox-item active">Card 1<div>
    Hello
    </div></div>
    <div class="flexbox-item">Card 2</div>
    <div class="flexbox-item">Card 3</div>
    <div class="flexbox-item">Card 4</div>
    <div class="flexbox-item">Card 5</div>
    <div class="flexbox-item">Card 6</div>
    <div class="flexbox-item">Card 7</div>
    <div class="flexbox-item">Card 8</div>
    <div class="flexbox-item">Card 9</div>
  </div>
  
</div>

CSS

.flexbox-wrapper {
    min-height: 300px;
    overflow-y: hidden;
    max-width: 300px;
    overflow-x: scroll;
    background: #ccc;
}

.flexbox-wrapper::-webkit-scrollbar {
  display: none;
  transition: all 1s;
}


.flexbox-panel {
     display: flex;
     flex-direction: row;
     /* flex-wrap: nowrap;*/
     justify-content: left;
     align-items: center;
     align-content: center;
     min-height: 300px;
     transition: all 0.5s;
     position: relative;
}


.flexbox-item {
     flex: 0 1 auto;
     min-width: 300px;
     text-align: center;
     list-style: none;
}

.flex-item:nth-child(1) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: auto;
}

.flex-item:nth-child(2) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: auto;
}

.flex-item:nth-child(3) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: auto;
}

JavaScript

let swipeButtons = document.querySelectorAll('.swipe-button');

function swipe(direction) {
	let wrapperBox = document.querySelector('.flexbox-wrapper');
	let box = document.querySelector('.flexbox-panel');
  let width = box.offsetWidth;
  let height = box.offsetHeight;
  // console.log({ box, width, height });
  
	let activeItem = document.querySelector('.active');
  let scroll = direction === 'left' ? -activeItem.scrollWidth +'px' : activeItem.scrollWidth +'px'
  box.style.left = scroll;
  wrapperBox.scrollLeft = 550;
  activeItem.scrollLeft = 300;
  console.log("box", {box})
	// console.log("activeItem", {activeItem})
}

swipeButtons.forEach(function(swipeButton) {
	swipeButton.addEventListener('click', function() {
		swipe(this.dataset.direction);
	}, false);
});