slick slider scale 효과를 줬는데 첫 창 열었을때 첫 이미지가 안먹히네요...
본문
그 다음부터는 열리는데 첫창 열었을때 첫번째 이미지가 먹히지 않습니다ㅜㅜㅜ 해결방법이 있을까요?
html
<div class="main_slider_wrap">
<div class="main_slick_slider">
<div>
<a href="#">
<div class="slick_img_box">
<img src="/web/img/mainscript/main_slide_1.jpg" alt="">
</div>
</a>
</div>
<div>
<a href="#">
<div class="slick_img_box">
<img src="https://via.placeholder.com/1920x960"/>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slick_img_box">
<img src="https://via.placeholder.com/1920x960/19ce60/fff"/>
</div>
</a>
</div>
</div>
</div>
css
.main_slick_slider .slick-slide {
position:relative;
overflow:hidden;
}
.main_slick_slider .slick-slide .slick_img_box img {
transform:scale(1.2);
transition:transform 1.2s ease;
}
.main_slick_slider .slick-active .slick_img_box img {
transform:scale(1);
transition:transform 1.2s ease;
}
js
$('.main_slick_slider').on('init', function(event, slick) {
$('.main_slick_slider').find('.slick-current').removeClass('slick-active').addClass('reset-animation');
setTimeout( function() {
$('.main_slick_slider').find('.slick-current').removeClass('reset-animation').addClass('slick-active');
}, 1);
});
$('.main_slick_slider').slick({
dots: true,
infinite: true,
speed:1200,
fade: true,
cssEase: 'linear',
autoplay: true,
prevArrow: false,
nextArrow: false,
pauseOnHover: false,
pauseOnFocus: false,
});
답변 2
slick-active 이 클래스를 미리 html 태그에 .main_slick_slider 첫번째자식 div에 넣으시면 됩니다.
<div class='main_slick_slider'>
<div class='slick-active'> -> 첫번째 div
빈페이지에 가져오신 소스를 넣어서 이상이 없는데
본페이지에 넣어서 이상이 있는거라면 무언가 중복 또는 충돌이 있는거로 보시면 될거 같아요.
급하게 해결 하시려면 저같으면...
넓이랑 높이값을 줄 수 있는 배경이미지를 깔고 그위에 slick를 실행시킵니다.
첫번째 이미지가 실행이 안되어도 영역이 잡혀있는 배경이미지 때문에
첫이미지 처럼 느끼게끔 해보는거지요.
사이트 주소가 없기에 제 추측은 우선 css 중복으로 여겨집니다.
저도 빈페이지에 가져와봤는데 저는 안되네요 ,, 배경이미지 깔고 slick을 그 위에 실행시키는게 background:url()로 가져와라는 건가요? css 충돌될만한건 없습니다!
background:url('첫이미지주소') 맞아요
빈페이지에 slick에서 제공되는 기본소스만 가지고서 작동이 되어야 하는데요...
https://m.blog.naver.com/ka28/221999891981
위 주소 참고해보실래요?
