slickのスライド要素が最初に戻ったとき

###前提・実現したいこと

このサイトのようにちょっとずつ拡大しながらスライドさせたいです。
http://tf-corp.co.jp/hiiki

2番目と3番目はbeforeChangeの中でnext()で指定してclassを付与させました。
3番目から1番目に移る前（beforeChangeのタイミング）にclassを付与させたいと思っております。
ご教示のほどよろしくお願いいたします。

###該当のソースコード

<div class="left">
   <ul id="top_slide_left">
      <li class="slide1 top_slide_on"></li>
      <li class="slide2"></li>
      <li class="slide3"></li>
   </ul>
</div>
<div class="right">
   <ul id="top_slide_right">
      <li class="slide1 top_slide_on"></li>
      <li class="slide2"></li>
      <li class="slide3"></li>
   </ul>
</div>


<script>
   //メインイメージスライダー
   $(document).ready(function(){
      $('#top_slide_left').slick({
        accessibility: false,
        autoplay: true,
        autoplaySpeed: 3000,
        speed: 2500,
        fade: true,
        pauseOnHover: false,
        arrows: false,
        infinite: true
      });
   });
   $('#top_slide_left').on('beforeChange', function(event, slick, currentSlide, nextSlide){
         $(".slick-active").next().addClass("top_slide_on");
   });
   $('#top_slide_left').on('afterChange', function(event, slick, currentSlide, nextSlide){
         $("#top_slide_left li:not(.slick-active)").removeClass("top_slide_on");
   });
   $('#top_slide_left').on('init', function(slick){
      $('#top_slide_left li:first-child').addClass("top_slide_on");
   });
   $(document).ready(function(){
      $('#top_slide_right').slick({
        accessibility: false,
        autoplay: true,
        autoplaySpeed: 3000,
        speed: 2500,
        fade: true,
        pauseOnHover: false,
        arrows: false,
      });
   });
   $('#top_slide_right').on('afterChange', function(event, slick, currentSlide, nextSlide){
         $(".slick-active").addClass("top_slide_on");
         $("#top_slide_right li:not(.slick-active)").removeClass("top_slide_on");
   });
</script>

<styles>
header .slide {
  display: flex;
}
/* line 292, style.scss */
header .slide li {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* line 298, style.scss */
header .slide .left {
  width: 50%;
}
/* line 300, style.scss */
header .slide .left .slide1 {
  background-image: url(/img/top_main_left1.jpg);
}
/* line 303, style.scss */
header .slide .left .slide2 {
  background-image: url(/img/top_main_left2.jpg);
}
/* line 306, style.scss */
header .slide .left .slide3 {
  background-image: url(/img/top_main_left3.jpg);
}
/* line 310, style.scss */
header .slide .right {
  width: 50%;
}
/* line 312, style.scss */
header .slide .right .slide1 {
  background-image: url(/img/top_main_right1.jpg);
}
/* line 315, style.scss */
header .slide .right .slide2 {
  background-image: url(/img/top_main_right2.jpg);
}
/* line 318, style.scss */
header .slide .right .slide3 {
  background-image: url(/img/top_main_right3.jpg);
}
/* line 322, style.scss */
header .slide .top_slide_on {
  animation: slick-active 10s linear forwards;
}
@keyframes slick-active {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
</styles>

###試したこと
slickが初期化された時に1番目の要素にclass名を付与させようとしましたが、afterChangeのタイミングで付与されました。
これをbeforeChangeのタイミングで付与させたいです。
※top_slide_onと区別するためにaddClassをtop_slide_firstとしてあります。

   $('#top_slide_left').on('init', function(slick){
      $('#top_slide_left li:first-child').addClass("top_slide_first");
   });

m.ts10806

2017/08/10 05:36

プログラムコードは```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）

chanNORI

2017/08/10 05:38

ご指摘ありがとうございます。修正いたしました。

m.ts10806

2017/08/10 06:05

HTMLとJavascriptのみのご提示ですが、他にCSSなどは指定していますか？

m.ts10806

2017/08/10 06:49 編集

動作確認がすぐにとれる環境にいないので詳細状況を確認したいのですが、現在のソースコードでどこまで出来ていて、どういうところに詰まっていますか？（または出来そうで出来ないとか、こうなるはずなのにならないとか）

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

回答1件

ベストアンサー

的外れかもしれませんが、質問者さんが想像しているのは以下のような挙動でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
6    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
7    <title>タイトル</title>
8    <style type="text/css">
9        * {
10            margin: 0;
11            padding: 0;
12        }
13
14        header .slide {
15            display: flex;
16        }
17
18        /* line 292, style.scss */
19        header .slide li {
20            width: 100%;
21            background-size: cover;
22            background-position: center;
23            background-repeat: no-repeat;
24        }
25
26        /* line 298, style.scss */
27        header .slide .left {
28            width: 50%;
29        }
30
31        /* line 300, style.scss */
32        header .slide .left .slide1 {
33            background-image: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=1);
34        }
35
36        /* line 303, style.scss */
37        header .slide .left .slide2 {
38            background-image: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=2);
39        }
40
41        /* line 306, style.scss */
42        header .slide .left .slide3 {
43            background-image: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=3);
44        }
45
46        /* line 310, style.scss */
47        header .slide .right {
48            width: 50%;
49        }
50
51        /* line 312, style.scss */
52        header .slide .right .slide1 {
53            background-image: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=1);
54        }
55
56        /* line 315, style.scss */
57        header .slide .right .slide2 {
58            background-image: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=2);
59        }
60
61        /* line 318, style.scss */
62        header .slide .right .slide3 {
63            background-image: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=3);
64        }
65
66        /* line 322, style.scss */
67        header .slide .top_slide_on {
68            animation: slick-active 10s linear forwards;
69        }
70
71        @keyframes slick-active {
72            0% {
73                transform: scale(1);
74            }
75            100% {
76                transform: scale(1.1);
77            }
78        }
79
80        .slide1, .slide2, .slide3 {
81            height: 500px;
82        }
83    </style>
84</head>
85<body>
86<header>
87    <div class="slide">
88        <div class="left">
89            <ul id="top_slide_left">
90                <li class="slide1"></li>
91                <li class="slide2"></li>
92                <li class="slide3"></li>
93            </ul>
94        </div>
95        <div class="right">
96            <ul id="top_slide_right">
97                <li class="slide1"></li>
98                <li class="slide2"></li>
99                <li class="slide3"></li>
100            </ul>
101        </div>
102    </div>
103</header>
104<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
105<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
106<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
107<script>
108    $(function () {
109        var options = {
110            accessibility: false,
111            autoplay: true,
112            autoplaySpeed: 3000,
113            speed: 2500,
114            fade: true,
115            pauseOnHover: false,
116            arrows: false,
117            infinite: true
118        };
119
120        $("#top_slide_left, #top_slide_right").slick(options);
121        $("#top_slide_left, #top_slide_right").find("li:eq(0)").addClass("top_slide_on top_slide_first");
122    });
123
124    $("#top_slide_left, #top_slide_right").on("beforeChange", function (e, s, c, n) {
125        $(this).find("li:eq(" + n + ")").addClass("top_slide_on");
126    });
127
128    $("#top_slide_left, #top_slide_right").on("afterChange", function () {
129        $(this).find("li:not(.slick-active)").removeClass("top_slide_on");
130    });
131</script>
132</body>
133</html>