slickで作った無限ループスライダーをホバー時に速度変化させたい

Question

ブラウザ幅100%に対して無限ループするスライダーをslickで作りました。
スライダー近くに配置したボタンにオンマウスした時に流れるスピードを早くしたいのですが、やり方お分かりになる方いらっしゃられないでしょうか？

ダメもとでホバー時にclass名の追加、削除で制御できないかなど試しましたがうまくいかず。よろしくお願いいたします。

<div id="fv_slider02">
<div><a href="/"><img src="img/01.jpg" alt=""></a></div>
<div><a href="/"><img src="img/02.jpg" alt=""></a></div>
<div><a href="/"><img src="img/03.jpg" alt=""></a></div>
<div><a href="/"><img src="img/04.jpg" alt=""></a></div>
<div><a href="/"><img src="img/05.jpg" alt=""></a></div>
<div><a href="/"><img src="img/06.jpg" alt=""></a></div>
<div><a href="/"><img src="img/07.jpg" alt=""></a></div>
<div><a href="/"><img src="img/08.jpg" alt=""></a></div>
</div>
<div id="btn"><img src="img/btn.jpg" alt=""></div>

<style>
#fv_slider02{margin: 40px 0 0 0;padding: 100px 0;background:#e5e5e5;}
#fv_slider02 div{width: 300px;margin: 0 25px;}
#fv_slider02 .slick-list {overflow: visible;}
#btn {width: 300px;height:100px;margin: 30px auto;}
</style>

<script>
$('#fv_slider02').slick({
    autoplay:true,
    autoplaySpeed: 0,
    cssEase: 'linear',
	speed: 5000,
    dots:false,
	arrows:true,
	initialSlide:0,
	touchMove:false,
	swipe:false,
	pauseOnHover:false,
  });
</script>

Comments

[kuma_kuma_]

slickはjavasuriptではなくjQueryのプラグインだよね？

[kuma_kuma_]

あと
> スライダー領域にオンマウス した時に流れるスピードを早くしたいのですが
え？早くするの？停止するなら判るけど．．．

[mmmaaasuu]

すみません、修正しました。
質問内容も文章も
「配置したボタンにオンマウスした時に流れるスピードを早くしたい」
に具体化させました。

[kuma_kuma_]

それならサンプルのHTMLとCSS,JSの追記をお願いします。
(ボタンの表示位置や方法で対応が変わってくる)
？ボタン？<div>とかじゃなくて？

[mmmaaasuu]

ありがとうございます。追記しました。
#btnにホバーした時に速度アップ、非ホバーで速度が元に戻るようにしたいです。

[kuma_kuma_]

せめてimg/btn.jpgのサイズを教えて

[mmmaaasuu]

サイズ記入しました。

Answer 1

【jQuery】カルーセルスライダーslickの使い方とサンプル集
マウスフォーカス当てたら停止ならあるけど

スピードを早くしたいならフォーカスイベント取得で
speedの値変化させればよいのだけれども早くするの？

追記
結局speedの値変更しても応答まで時間が2～5秒ぐらいかかってしまったので
一度リセットして再設定にしました。
ほかは質問にあった内容と同じです。

$(function () {
	// slickの設定
	function slickinit(spped){
		return {
		    autoplay:true,
		    autoplaySpeed: 0,
		    cssEase: 'linear',
		    speed: spped,
		    dots:false,
		    arrows:true,
		    initialSlide:0,
		    touchMove:false,
		    swipe:false,
		    pauseOnHover:false,
		}
	}

	// 初期設定
	$('#fv_slider02').slick(slickinit(5000));

	// マウスオーバー
	$('#btn').mouseover(function(e) {
		$('#fv_slider02').slick('unslick');			// 設定をリセット
		$('#fv_slider02').slick(slickinit(50));		// 再設定
		//$('#fv_slider02').slick('slickSetOption', 'speed', 50, false); /* こっちだと反応が遅い */
		console.log("mouseover");
	});
	// マウスアウト
    $('#btn').mouseout(function(e) {
		$('#fv_slider02').slick('unslick');			// 設定をリセット
		$('#fv_slider02').slick(slickinit(5000));	// 再設定
		//$('#fv_slider02').slick('slickSetOption', 'speed', 5000, false); /* こっちだと反応が遅い */
		console.log("mouseout");
	});

});	

Comments

[mmmaaasuu]

はい、追記した通りでボタン要素にオンマウス した時だけ速度を早めたいです。
slick フォーカスイベント　で調べてみます。
差し支えなければサンプルとなるようなコードも教えていただけますと大変ありがたいです。

[mmmaaasuu]

誠にありがとうございます！実装し挙動確認いたしました。

設定をリセットするとスライダーが1枚目からスタートして速度が上がる、
設定をリセットしないとスライダーが一定位置まで動かないと速度変化が起きない、という状態かと思います。

スライダーの位置を引き継いだ上で、オンマウスでタイムラグなく速度変化するのが理想の挙動でして頂戴したコードを参照させていただいて調べてみます。

厚かましいお願いですが、もしこうすれば実現できるというのをご存知でしたら教えていただけますと幸いです。ホバーではなくクリックだったらできるなど、多少条件変わっても実現できるとありがたいです。

[kuma_kuma_]

> 設定をリセットしないとスライダーが一定位置まで動かないと速度変化が起きない
多分そうなんだよね。それでコメントで
$('#fv_slider02').slick('slickSetOption', 'speed', 50, false);
残しておいたの
ただスライダーの位置を引き継いだ上でとなると
マウスオーバー時
1.　表示位置を取得
2.　設定リセット
3.　再設定
4.　表示位置を再設定　※この時タイムラグが発生
ってなると思う。
一番はやいのはslickを使わないで実装する方法だね。
ただここでの質問とは内容が変わるからお答えできないので自分で調べてみてね

[mmmaaasuu]

ご丁寧にありがとうございました！調べてみます。
kuma_kumaさんでしたらこの仕様のスライダー実装する場合ならこのスライダー使うってございますか？

[kuma_kuma_]

> この仕様のスライダー実装する場合
CSSアニメーションだと現在位置の取得が難しいので
JavascriptまたはjQueryで処理を1から作るかな？

[mmmaaasuu]

ありがとうございます！