slick 슬라이드 센터모드 질문
본문
갤러리 최신글을 슬릭 슬라이드를 이용해서 위의 형태로 작업했는데
centerMode: true,
slidesToShow: 3,
센터모드로 3개의 슬라이드가 보여지게 하고 양옆 하나씩은 일부만 보여지면서 크기를 줄이고 투명도를 줬습니다.
.slick-slide {opacity: .5; transform: scale(0.8); transition: all .5s ease-in-out;}
.slick-active {opacity:1; transform: scale(1);}
이렇게 해서 잘 돌아가긴 하는데 문제는..
한바퀴 돌아서 1번 이미지가 다시 가운데에 위치할 때 active 걸린 3개의 이미지가 아주 잠깐 opacity: .5; transform: scale(0.8); 이 되었다가 다시 돌아오는 현상이 있습니다..
.slide-center를 이용해서 가운데 하나만 적용을 하면 아주 잘 돌아가는데
.slide-active로 전면에 보이는 3개를 적용시키면 저렇게 되네요.
5개든 10개든 갯수 상관없이 무조건 한바퀴 돌면 저런 현상이 나타나는데 해결방법이 없을까요..
이거 때문에 하루종일 붙들고 있네요.. 하...
답변 1
아래의 코드도 한번 참고를 해보시겠어요..
CSS
.slick-slide {
opacity: .5;
transform: scale(0.8);
transition: all .5s ease-in-out;
}
.slick-center {
opacity: 1;
transform: scale(1);
transition: all .5s ease-in-out;
}
JavaScript
$(document).ready(function(){
$('.your-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
// Remove the transition class from all slides
$('.slick-slide').removeClass('slick-center');
});
$('.your-slider').on('afterChange', function(event, slick, currentSlide){
// Add the transition class to the center slide
$('.slick-slide.slick-center').addClass('slick-center');
});
$('.your-slider').slick({
centerMode: true,
slidesToShow: 3,
centerPadding: '0', // You can adjust the padding as needed
focusOnSelect: true,
// Add other options as needed
});
});
가운데 하나만 적용이 되네요..
