JSFiddle - React, Tailwind, and code Playground

HTML

<button id="previous">Previous</button>
<button id="forward">Froward</button>
<h3 id="detect">Test</h3>

<div class="swiper-wrapper" >
    
     <li  data-pos="5" class="product-card">
                <div href="/products" class="no-underline">
                    <div class="product-card-image aspect-ratio aspect-ratio--1 product-card-image--two-images">
                        <picture class="product-card-image--primary content overflow-hidden">
                            <img width="300px" height="300px" data-sizes="auto" src="https://cdn.shopify.com/s/files/1/0044/9802/products/Tanner-Goods-High-Sabaku-Freshener-Thumb-New_360x.jpg?v=1606887893" data-srcset="//cdn.shopify.com/s/files/1/0238/2821/products/GREATS-Mens-Indy-BlancoNavy-01_Web_500x.jpg?v=1642482045"  alt  class="lazyautosizes lazyloaded" sizes="275px" srcset="https://cdn.shopify.com/s/files/1/0044/9802/products/Tanner-Goods-High-Sabaku-Freshener-Thumb-New_360x.jpg?v=1606887893">
                        </picture>
                    </div>
                </div>
            </li>
            
            <li  data-pos="5" class="product-card">
                <div href="/products" class="no-underline">
                    <div class="product-card-image aspect-ratio aspect-ratio--1 product-card-image--two-images">
                        <picture class="product-card-image--primary content overflow-hidden">
                            <img width="300px" height="300px" data-sizes="auto" src="https://cdn.shopify.com/s/files/1/0044/9802/products/Tanner-Goods-High-Sabaku-Freshener-Thumb-New_360x.jpg?v=1606887893" data-srcset="//cdn.shopify.com/s/files/1/0238/2821/products/GREATS-Mens-Indy-BlancoNavy-01_Web_500x.jpg?v=1642482045"  alt  class="lazyautosizes lazyloaded" sizes="275px" srcset="https://cdn.shopify.com/s/files/1/0044/9802/products/Tanner-Goods-High-Sabaku-Freshener-Thumb-New_360x.jpg?v=1606887893">
                        </picture>
                    </div>
                </div>
           ...

CSS

body {
  overflow-x: hidden;
}

.product-card {
    position: relative;
    display: block;
    margin: 5px 0;
    list-style: none;
    margin-right: 10px;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    transition: transform 200ms ease-out 0s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    transform: translate3d(0px, 0px, 0px);
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

JavaScript

const scrollFront = document.getElementById('forward');
const scrollBack = document.getElementById('previous');
const scrollcontainer = document.querySelector('.swiper-wrapper');
const detect = document.getElementById('detect');

scrollFront.addEventListener('click', () => {
 
  const style = window.getComputedStyle(scrollcontainer);
  const matrix = new WebKitCSSMatrix(style.transform);
  console.log('translate3d: ', matrix.m41);

  scrollcontainer.style.transform = `translate3d(${matrix.m41 + -250}px, 0px, 0px)`;
});

scrollBack.addEventListener('click', () => {
  
  const style = window.getComputedStyle(scrollcontainer);
  const matrix = new WebKitCSSMatrix(style.transform);
  console.log('translate3d: ', matrix.m41);
  
    scrollcontainer.style.transform = `translate3d(${matrix.m41 + 200}px, 0px, 0px)`;
  

  
});


let isDown = false;
let startX;
let scrollLeft;

scrollcontainer.addEventListener('mousedown', (e) => {
    isDown = true;
    startX = e.pageX;
    console.log(startX);
});

scrollcontainer.addEventListener('mouseleave', (e) => {
  isDown = false;
});

scrollcontainer.addEventListener('mouseup', (e) => {
  isDown = false;
});

scrollcontainer.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  
  const x = e.pageX;
  const style = window.getComputedStyle(scrollcontainer);
  const matrix = new WebKitCSSMatrix(style.transform);

  const walk = x - startX;
  scrollcontainer.style.userSelect = 'none';
  scrollcontainer.style.transform = `translate3d(${matrix.m41 + (walk * 10)}px, 0px, 0px)`;
  startX = e.pageX;
  detect.innerHTML = `Tranlate: ${matrix.m41}`;
  console.log(walk);
  console.log(matrix.m41);
});