カルーセルスライダーに表示されている要素を判定する方法を教えてください。

1要素ずつ表示するカルーセルスライダーにおいて、表示されている要素を判定する方法があればご教示いただけないでしょうか。

下記は動作サンプルです。
サンプル
playボタンを押した際、表示されている音楽ジャンル名をアラートできればと思っています。

カルーセルスライダーの実装には、slick.jsを使用しています。

難儀なことかと存じますが何卒よろしくお願いいたします。

サンプルのソースコード

html
1<body>
2  <div id="sounds">
3    <div id="pops">pops</div>
4    <div id="rock">rock</div>
5    <div id="jazz">jazz</div>
6    <div id="classic">classic</div>
7  </div>
8  <button id="play">play</button>
9
10 
11  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
12  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
13  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
14  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
15</body>

javascript
1document.getElementById("play").onClick = () => {
2  const soundSource = ["pops", "rock", "jazz", "classic"];
3  let indexNumber;
4  switch ("スライダーに表示されているものが、") {
5    case "pops":
6      indexNumber = 0;
7      break;
8    case "rock":
9      indexNumber = 1;
10      break;
11    case "jazz":
12      indexNumber = 2;
13      break;
14    case "classic":
15      indexNumber = 3;
16  }
17  alert(soundSource[indexNumber]);
18};
19
20// カルーセルスライダー
21$(function() {
22  $("#sounds").slick();
23});
24

css
1#sounds div {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  font-size: 1.5em;
6  width: 200px;  
7  height: 200px;
8  border: 1px solid black;
9}

調べたこと

Online Alarm Clock
私が実現したいことに近しい機能を実装できているページを見つけました。（"with the sound of"部分です）
しかし、上記ページの該当部分はカルーセルスライダーではなく、要素の表示と非表示を制御して実装しているようでした。
できればではありますが、DOMの操作はできるだけ少なくかつ、要素の切り替えはボタンのみではなくスクロールも受け付けたいと考えています。

行動規範の内容に同意します

回答1件

ベストアンサー

slickCurrentSlide メソッドはスライドのインデックスを返します。今回の質問文のコードを動作させる場合、このメソッドを使用するだけで目的を達成出来ます (動作確認用リンク)。

slickCurrentSlide

none
Returns the current slide index

jQuery
1$(function() {
2  const slider = $("#sounds").slick();
3
4  document.getElementById("play").onclick = () => {
5    const soundSource = ["pops", "rock", "jazz", "classic"];
6    const indexNumber = $("#sounds").slick('slickCurrentSlide');
7    alert(soundSource[indexNumber]);
8  };
9});