入れ子のスライダーの不具合（slickを使用）

前提・実現したいこと

slickを使って入れ子のスライダーを実装しています。
また現在表示しているスライド(div.slide)の番号に応じてclassを付与し、スライダー(section#slider)の背景画像が切り替わります。

発生している問題・エラーメッセージ

入れ子の中身のスライダー(ul.inner-slider)が切り替わる際に背景画像は切り替えたくないのですが反応してしまいます。

該当のソースコード

html
1<!-- slick当ててる箇所 & クラスによってbackground-imageが切り替わる（初期クラス:bg01） -->
2<section id="slider" class="bg01">
3
4		<div class="slide">
5			<div class="items">...</div>
6		</div>
7
8		<div class="slide">
9			<div class="items">
10				<!-- 入れ子の中身のスライダー -->
11				<ul class="inner-slider">
12					<li><img src="./images/thum01.png" alt=""></li>
13					<li><img src="./images/thum02.png" alt=""></li>
14				</ul>
15			</div>
16		</div>
17
18		<div class="slide">
19			<div class="items">...</div>
20		</div>
21</sectio>
22
23

javascript
1$(function(){
2	var $slider = $('#slider')
3
4	$($slider).slick();
5
6	// $('.inner-slider')の切り替えにも反応してしまう
7	$($slider).on('afterChange', function(event, slick, currentSlide, nextSlide){
8		$slider.removeClass('bg01 bg02 bg03');
9		switch(currentSlide){
10			case 0:
11				$($slider).addClass('bg01');
12				break;
13			case 1:
14				$($slider).addClass('bg02');
15				break;
16			case 2:
17				$($slider).addClass('bg03');
18				break;
19		}
20	});
21
22	$('.inner-slider').slick();
23
24})
25

試したこと

背景を独立したスライダーにしてasNaviForで連動させてみましたが背景としての調整が複雑になってしまったので断念しました。
（根本的解決ともちがいますし、、、）
どうかお力をお貸しください。

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

回答1件

ベストアンサー

内側のイベント伝播を止めればできます。

Js
1    $('.inner-slider').slick().on('afterChange', function(event, slick, currentSlide, nextSlide){
2        return false;
3    });
4```**動くサンプル：**[https://jsfiddle.net/hmvdfynr/](https://jsfiddle.net/hmvdfynr/)

投稿2019/01/08 17:23