JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
    <title>JS Bin</title>
  </head>

  <body>
    <div id="sounds">
      <div id="pops">pops</div>
      <div id="rock">rock</div>
      <div id="jazz">jazz</div>
      <div id="classic">classic</div>
    </div>
    <button id="play">play</button>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  </body>

</html>

CSS

#sounds div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

JavaScript

$(function() {
  const slider = $("#sounds").slick();

  document.getElementById("play").onclick = () => {
    const soundSource = ["pops", "rock", "jazz", "classic"];
    const indexNumber = $("#sounds").slick('slickCurrentSlide');
    alert(soundSource[indexNumber]);
  };
});