slickスライダーにて、２周目のスライドにcssが利かなくなり、current状態になると効き始める

Question

slickスライダーにて、２周目のスライドにcssが利かなくなり、画面に表示されるとやっと効き始める問題を解決したい。

コードは以下の通りです。

html
<div class="slider2" >

                    <div id="sliderItem2">
                        <div id="slideInner2">
                        <img src="……" alt="">
                    </div>
                </div>

                <div id="sliderItem2">
                    <div id="slideInner2">
                    <img src="……" alt="">
                </div>
            </div>


            <div id="sliderItem2">
                <div id="slideInner2">
                <img src="……" alt="">
            </div>
        </div>

            <div id="sliderItem2">
                <div id="slideInner2">
                <img src="……" alt="">
            </div>
        </div>

</div>

css

.slider2 #sliderItem2 #slideInner2{
padding: 20px;
box-sizing: border-box;
width: 100%;
}

.slider2 #sliderItem2 #slideInner2 img{
max-width: 100%;
}

js

$(function(){
$('.slider2').slick({
autoplay: true,
speed:1000,
autoplaySpeed: 5000,
arrows: true,
dots: false,
slidesToShow:3
})
})

Answer 1

#sliderItem2と#slideInner2のidを持つ要素が複数あるのが問題だと思いました。
idとclassを逆の使い方をされているように感じます。
実際に動かしてはいませんが今回の問題もそこに原因があるのだと思います。

slider2はid(#slider2)として書き直し、
sliderItem2、slideInner2はclass(.sliderItem2、.slideInner2)として書き直してみてください。