スライダープラグインのslickについて質問です

Question

###前提・実現したいこと
スライダープラグインのslickについて質問です
１、スライダー上でマウスホイールを上下に動かしたらスライダーが一つ動くようにしたい

２、.slick-dots liにjquery でアニメーションをつけたい

<div class="block">!</div>

<script>
$(".block").hover(function(){
  $(this).animate({
    width: "200px",
  }, 1500 );
});
</script>

---

例えば上のコードでclass="block"にホバーしたらサイズが変わりますが、

---

<script>
$(".slick-dots li").hover(function(){
  $(this).animate({
    width: "200px",
  }, 1500 );
});
</script>

---

このコードを入れても".slick-dots li"はホバー時に変化しません

１についてはまったくわからず申し訳ありませんがよろしくお願いします

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[kei344]

修正ありがとうございます。

Answer 1

１．の方は分からないので2.の方だけ。

まず、1点確認ですが、アニメーションでサイズを変えようとしているのは
slick.jsのデフォルトのdotsですよね？
だとすると.slick-dots liに対してアニメーションさせようとしても ● のサイズは変わりません。
Chromeの開発者ツール等で確認すれば分かることですが、slick.jsのdotsの ● は、
.slick-dots li button::beforeに設定されたフォントです。

従って、jQueryやCSS3transition等でサイズ変更するアニメーションを適用したいならば、
まずフォントを使用する方式をやめ、.slick-dots li button::beforeもしくはその親の
.slick-dots li button自身にオリジナルのスタイルを適用した上で、
そちらにアニメーションを適用する必要があると思われます。

うろ覚えなのでアレですが、::beforeだとそもそもアニメーション処理出来なかったかもしれないので、
その場合は::beforeは非表示にして、button要素自身で処理したほうが良いかもしれません。

試してみてください。

Comments

[kei344]

To: aKusano
とてもとても細かいのですが、そう読めてしまうという部分を指摘します。

> ::beforeだとそもそもアニメーション処理出来なかったかもしれない
確かにJavaScriptからアクセスするのは面倒ですが、CSSのtransitionは効くので、「アニメーション処理出来ない」は「jQueryでは簡単にアニメーション処理出来ない」くらいのほうが良いのでは。

[manabufukai]

（質問の主題から逸れたところで申し訳ないですが）
あれ？擬似要素ってJavaScriptで取得できない+イベントリスナー設定不可なんじゃありませんでしたっけ…？

cssのアニメーション（古いAndroidは不可だったかと）、transitionは可なので
css側でやるのが普通かと思ってました。（※JavaScriptを使うならclassのtoggleなどでcssを適用する、というのが多いかと思いますが）

…逸れたままのところで話を展開させては良くないかな、と思ったので
1について、
ざっと見た感じ、
・slickNext
・slickPrev
のメソッドが用意されているようなのでonmousewheel の値の増減によってこれらのメソッドを呼び出す処理を入れればできると思います。（※ただし、onmousewheelはブラウザによって少々差異があるので、それらの処理の出し分けが難しければjQuery mousewheelプラグインなどを併用したほうがいいかもしれません。）

[kei344]

To: manabufukai
> 擬似要素ってJavaScriptで取得できない+イベントリスナー設定不可
そうだと思います。「簡単に」を付けたのは、（実装の手間と表現力は置いておいて）動的にstyleタグを書き換えることで擬似アニメーションは可能といえば可能なので、あいまいにしました。

[manabufukai]

Re: kei334さん
なるほど。直接的にJavaScriptから処理は不可ではあるものの、というニュアンスですね。
（もしできる方法があるならそれはそれで知りたかったので、失礼しました。笑）

[退会済みユーザー]

Re: kei334さん,manabufukaiさん

ありがとうございます
２の問題は.slick-dots liに新しいcssを適用する事で解決しました

１の問題なのですがマウスホイールをしたら
・slickNext
・slickPrev
この要素をクリックした時と同じ処理を与えるということですか？

[kei344]

To: manabufukai
> ざっと見た感じ、
コメントではなく回答に書かれてはいかがでしょう。（逸れてしまう＆もったいない）

To: hanasan
> この要素をクリックした時と同じ処理を与える
slick自体にメソッド（関数）が用意されています。
また、質問文に対する修正依頼は読んで頂けましたか？

[manabufukai]

Re: kei344さん
すみません、時間も時間だったので手を抜いてしまいました。。
ちょっと忙しくて顔を出せなかったうちに解決してくださっていたようで…ありがとうございます。

Answer 2

$(document).on('ready', function() {
	$( '.variable' ).slick( {
		  dots: true
		, infinite: false
		, variableWidth: true
		, draggable:false
	} ).on( 'mousewheel', function( event, delta, deltaX, deltaY) {
		event.preventDefault();
		console.log( event );
		if (deltaY < 0 ) {
			//console.log("上");
			$( this ).slick("slickNext");
		} else {
			//console.log("下");
			$( this ).slick("slickPrev");
		}
	} );
	});

if (deltaY < 0 )の部分をdeltaYより～の記述で動きました
ありがとうございました

Answer 3

ありがとうございます
自分なりに以下のコードを試したのですが

<script>
$( '.slick-wrap' ).slick().on( 'mousewheel', function( event ) {
    event.preventDefault();
    if ( event.deltaY < 0 ) {
        $( this ).slickNext();
    } else {
        $( this ).slickPrev();
    }
} ); // 未テストです
</script>

うまく動かなかったです
【動かない現象】
・マウススクロールに反応しない
・ドラッグしてスライダーを動かすのをoptionで無効にしていたがなぜか有効になっている

Comments

[kei344]

.slick()の部分はわかると思って省略していたのですが、そこに設定を入れないと反映されません。

.slickNext() は どうも下記のように指定するようです。
if ( event.deltaY < 0 ) {
$( this ).slick( 'slickNext' );
} else {
$( this ).slick( 'slickPrev' );
}

[退会済みユーザー]

設定方法なのですが、
<script type="text/javascript">
$(document).on('ready', function() {
$(".variable").slick({
dots: true,
infinite: false,
variableWidth: true,
draggable:false,
});
});
</script>
このようにしていますが、どこに頂いたコードを入れるかわかりません

[kei344]

違います。
> $(document).on('mousewheel', function(event) {
document全てのホイールイベントが発生したときに毎回$(".variable")にslickを割り当てています。

> draggable:false,
> if ( event.deltaY < 0 ) {
オブジェクト式の中にif文を直接入れることはできません。

[退会済みユーザー]

$( '.variable' ).slick().on( 'mousewheel', function() {
dots: true,
infinite: false,
variableWidth: true,
draggable:false,
event.preventDefault();
if ( event.deltaY < 0 ) {
$( this ).slickNext();
} else {
$( this ).slickPrev();
}
} );
この形ですか？

[kei344]

> この形ですか？
違います。

> draggable:false,
> event.preventDefault();
オブジェクト式の中で文を始めないでください。

私の回答に追記しました。

[退会済みユーザー]

色々とありがとうございます

頂いた回答の追記コードですが、こちらでも動かないのです
コンソールログで見るとマウスホイール自体は取得をしている状態です

[kei344]

> コンソールログで見るとマウスホイール自体は取得をしている状態です
掲示したコードにはコンソールに何も表示しませんが、何か表示するようにしていますか？また、エラーなどは起こっていますか？

[退会済みユーザー]

自分で試したのですが、
<script>
$( '.variable' ).slick( {
dots: true
, infinite: false
, variableWidth: true
, draggable:false
} ).on( 'mousewheel', function( event ) {
event.preventDefault();
if ( event.deltaY < 0 ) {
console.log("上");
$( this ).slick("slickNext");
} else {
console.log("下");
$( this ).slick("slickPrev");
}
} );
</script>
このコードで試すと「下」しかログが出ません、「deltaY」が正しく取得できない？
状態です

[kei344]

公式からダウンロードしたファイルに入っているサンプルで同じコードを書いた状態で、IE11/Firefox/Chromeで動作を確認できました。

下記のようにしていますか？また、HTMLに問題は無いですか？

$(document).on('ready', function() {
/* ここの間にコードを挟む */

/* ここの間にコードを挟む */
});

[退会済みユーザー]

すみません挟むとは
$(document).on('ready', function() {
$( '.variable' ).slick( {
dots: true
, infinite: false
, variableWidth: true
, draggable:false
} ).on( 'mousewheel', function( event, delta, deltaX, deltaY) {
event.preventDefault();
if ( event.deltaY < 0 ) {
console.log("上");
$( this ).slick("slickNext");
} else {
console.log("下");
$( this ).slick("slickPrev");
}
} );
});
ですか？変化はないです

[kei344]

> event, delta, deltaX, deltaY
そう書いても要素を受け取れるわけではありません。
if の前で console.log( event ); をして内容を見てください。

スライダー自体は動いているんですね？
ブラウザはSafariじゃないですよね？
もしそうであればお手上げです。HTMLの組み方に問題が有るか、閲覧環境に問題が有るかもしれませんね。

Answer 4

manabufukaiさんの書かれているのはこういうことかと。

<script src="js/mousewheel.js"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$( '.slick-wrap' ).slick().on( 'mousewheel', function( event ) {
	event.preventDefault();
	if ( event.deltaY < 0 ) {
		$( this ).slickNext();
	} else {
		$( this ).slickPrev();
	}
} ); // 未テストです
</script>

【Web Developer Blog: slick slider horizontal scroll with mouse wheel js】
http://blog.thilankad.com/2016/04/slick-slider-horizontal-scroll-with.html

【Feature Request: Mouse wheel support ・ Issue #122 ・ kenwheeler/slick ・ GitHub】
https://github.com/kenwheeler/slick/issues/122

---

ちなみに jQuery Mouse Wheel Plugin は Safari9 のバグのため Safari ではうまく動かないかもしれません。

【GitHub - jquery/jquery-mousewheel: A jQuery plugin that adds cross-browser mouse wheel support.】
https://github.com/jquery/jquery-mousewheel

---

追記：

<script src="js/mousewheel.js"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$( '.variable' ).slick( {
	  dots: true
	, infinite: false
	, variableWidth: true
	, draggable:false
} ).on( 'mousewheel', function( event ) {
	event.preventDefault();
	if ( event.deltaY < 0 ) {
		$( this ).slick( 'slickNext' );
	} else {
		$( this ).slick( 'slickPrev' );
	}
} ); // テストしました問題なく動きます
</script>

Answer 5

To: kei334さん
失礼しました
質問内容を修正しました

スクロールの件ですが

$(".test").mousewheel(function(en, delta, deltaX, deltaY) {
	$(".test").text(deltaY);
});

このようにすると「.test」でスクロールした時に番号を取得できました

これを利用してスライダーを動かしたいのですが、
slickNextメソッドをどうのように指定したらいいのかわかりません

Comments

[kei344]

あ、「コメントではなく回答に書かれてはいかがでしょう。」はmanabufukaiさんのコメントのことです。新たに試したことなどは回答でもいいですが、質問文に追記していくことがわかりやすいと思います。