Click and Drag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Click and Drag to Scroll</title>

  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div class="panels">
    <div class="panel"><span class="number">1</span></div>
    <div class="panel"><span class="number">2</span></div>
    <div class="panel"><span class="number">3</span></div>
    <div class="panel"><span class="number">4</span></div>
    <div class="panel"><span class="number">5</span></div>
    <div class="panel"><span class="number">6</span></div>
    <div class="panel"><span class="number">7</span></div>
    <div class="panel"><span class="number">8</span></div>
    <div class="panel"><span class="number">9</span></div>
    <div class="panel"><span class="number">10</span></div>
    <div class="panel"><span class="number">11</span></div>
    <div class="panel"><span class="number">12</span></div>
    <div class="panel"><span class="number">13</span></div>
    <div class="panel"><span class="number">14</span></div>
    <div class="panel"><span class="number">15</span></div>
    <div class="panel"><span class="number">16</span></div>
    <div class="panel"><span class="number">17</span></div>
    <div class="panel"><span class="number">18</span></div>
    <div class="panel"><span class="number">19</span></div>
    <div class="panel"><span class="number">20</span></div>
    <div class="panel"><span class="number">21</span></div>
    <div class="panel"><span class="number">22</span></div>
    <div class="panel"><span class="number">23</span></div>
    <div class="panel"><span class="number">24</span></div>
    <div class="panel"><span class="number">25</span></div>
  </div>

  <script src="./scripts.js"></script>
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Erica+One');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-width: 100vw;
  min-height: 100vh;
  background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%),
              radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%),
              radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%),
              radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%),
              radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%),

              radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
              radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
              radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
              radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
              radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
  background-color: #b03;
  background-size: 100px 100px;
  display: flex;
  align-items: center;
}

.panels {
  width: 100%;
  height: 70vh;
  perspective: 500px;
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow-x: scroll;
}

.panel {
  min-width: 160px;
  height: 80%;
  background: rgba(255, 255, 255, 0.5);
  font-family: 'Erica One', cursive;
  font-size: 100px;
  display: inline-flex;
  user-select: none;
  border: 10px solid rgba(0,0,0,.2);
}

.panel .number {
  margin: auto;
}

.panel:nth-child(even) { transform: rotateY(10deg); }
.panel:nth-child(odd)  { transform: rotateY(-10deg); }

@media screen and (max-width:750px) {
  .panel {
    min-width: 90px;
    height: 70%;
    font-size: 50px;
  }
}

const slider = document.querySelector('.panels');
let isMouseDown = false,
    startX;

function handleMouseDown(e) {
  isMouseDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
}

function handleScroll(e) {
  if (!isMouseDown) return;

  let currPosX = e.pageX - slider.offsetLeft,
      scrollX = (currPosX - startX) * 2;

  this.scrollLeft -= scrollX;
  startX = currPosX;
}

slider.addEventListener('mousemove', handleScroll);
slider.addEventListener('mousedown', handleMouseDown);
slider.addEventListener('mouseup', () => isMouseDown = false);
slider.addEventListener('mouseleave', () => isMouseDown = false);