slickのスライダーで現在のスライド位置を取得したい

前提・実現したいこと

お世話になっております。
設置したスライダーで表示している画像が
何番目かという情報を取得したく試行錯誤してみたのですが
うまくいきませんでした。
良い方法をお知りの方がいましたら
是非ご教授願えないでしょうか。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6	<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
7	<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
8	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9	<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
10	<style>
11		* {
12			margin: 0;
13			padding: 0;
14		}
15		.slide01 {
16			margin: 50px;
17			width: 150px;
18		}
19		.slick-prev, .slick-next {
20			background-color: #000;
21		}
22		.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
23			color: inherit;
24			outline: none;
25			background-color: #000;
26		}
27	</style>
28	<script>
29	$(document).ready(function(){
30		var $carousel = $('.slide01');
31		if( $carousel.length) {
32			$carousel.slick({
33				autoplay: false,
34				speed: 600,
35				infinite: true,
36				dots:false,
37				arrows: true,
38				slidesToShow:1,
39				slidesToScroll: 1,
40				
41			});
42		}
43
44		// スクロールイベントの監視
45		$carousel.on('wheel', function(e) {
46			e.preventDefault();
47			if (!$carousel.hasClass('js-slick-moving')) {
48				if (e.originalEvent.deltaY < 0) {
49					$(this).slick('slickNext');
50					//ここにスライダーの枚数を取得するコードを入れたいです。(console.logで確認出来れば大丈夫です。)
51				} else {
52					$(this).slick('slickPrev');
53					//ここにスライダーの枚数を取得するコードを入れたいです。(console.logで確認出来れば大丈夫です。)
54				}
55			}
56		})
57
58		// スライド送り中を判定するためにクラスを付与する
59		$carousel.on('beforeChange', function(){
60			$carousel.addClass('js-slick-moving');
61		});
62
63		$carousel.on('afterChange', function(){
64			$carousel.removeClass('js-slick-moving');
65		});
66	});
67	</script>
68</head>
69<body>
70	<div>
71		<ul class="slide01">
72			<li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=1" alt="img"></li>
73			<li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=2" alt="img"></li>
74			<li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=3" alt="img"></li>
75			<li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=4" alt="img"></li>
76		</ul>
77	</div>
78</body>
79</html>

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

回答1件

ベストアンサー

この辺の情報でできると思います。

【slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法 | NxWorld】
https://www.nxworld.net/tips/jquery-plugin-slick-slide-counter.html

【slickCurrentSlide | slick - にほんご。】
https://tr.you84815.space/slick/methods/slickCurrentSlide.html

【slickのスライドギャラリーに総数と何枚目かを表示する | ハックノート】
https://hacknote.jp/archives/11817/

投稿2020/05/26 09:36

kei344

総合スコア69407

asayama

2020/05/26 09:48

ご回答ありがとうございます。ただ、頂いた記事は目を通した上で実装できない状態が続いてまして… 申し訳ないのですが、もしお手すきであればどの様にすれば実装できるか一例を頂ければとても助かりますどうぞよろしくお願い致します。

kei344

2020/05/26 09:50

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。【推奨していない質問｜teratail（テラテイル）】 https://teratail.com/help/avoid-asking > コードをください・デバッグしてください等の丸投げの質問 > 何かを作りたいのでコードを書いてほしい、学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、推奨していません。 > 問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。 > まずは実際に作業に取り組み、つまづいたところで投稿をしてみてください。

asayama

2020/05/26 10:26

ご質問方法が悪かったようで失礼いたしました。次回以降気を付けます。とりあえずこの件に関しては解決しました。お手数をおかけいたしました。

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