slick 슬라이드 센터모드 질문

slick 슬라이드 센터모드 질문

QA

slick 슬라이드 센터모드 질문

본문

3689962005_1721823438.8152.png

갤러리 최신글을 슬릭 슬라이드를 이용해서 위의 형태로 작업했는데

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
    });
});
 

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 44
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT