jquery 어떤 스타일인가요??
본문
아래 스타일 같은 슬라이드는 뭘로 검색해야 하나요???
답변 1
답변 감사드립니다. 해당 사이트 center mode 가 가장 유사한데~
딱 원하는 스타일이 아닌거 같아요~
좀더 검색해봐야될거같습니다.
슬릭 패딩값 주는거있을거에요. 그래서 센터모드에서는 패딩값을빼고 그이외 리스트는 패딩값을 주면 저렇게 active 된얘들만 크게 보여줄수있어요
ㅎ 생각보다 힘드네요.. 패딩값 부분 이것저것 만져보고 있는데~
전체가 다 먹어버리네요. ㅜㅜ
.slick-slide {
opacity: 0.1;
}
.slick-active {
opacity: 1.0;
}
.slick-slide 처럼 전제를 0.1 로, active만 1.0 인데..
.slick-slide {
opacity: 0.1;
padding:20px;
}
.slick-active {
opacity: 1.0;
padding:0px;
}
위처럼 수정을 하면 비율이이상한 비율처럼 나오네요. ㅎ
css 로 컨트롤 하는게 아니라 자바스크립트로 컨트롤 가능해요.
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
이런식으로 센터패딩 옵션으로 가능합니다
친절한 답변 감사드립니다.
첨부해주신 소스에 centerpadding 값을 수정했엇는데.. 좌우 슬라이드 또한 같이 똑같은 크기로 패딩값이적용되는거같아서요..
해당 중간 센터에 오는 슬라이드는 패딩을 0으로 주고, 좌우슬라이드 패딩값들을 줘야되는데.. 그 부분 찾는게 쉽지않네요.ㅜㅜ
css로 각 컨텐츠들에 패딩을 주시고 슬릭 자바스크립트로 centerpadding 0으로 줘보세요
