###前提・実現したいこと
このサイトのようにちょっとずつ拡大しながらスライドさせたいです。
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"); });
回答1件
あなたの回答
tips
プレビュー