개발노예 코드와 일상

가벼운 슬라이더 찾다가 발견해서 꾸준히 사용중
반응형으로 사용하기도 편하긴하더라
플러그인 추가해주고나서~

$('.notice_slide').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : true, //무한 반복 옵션
fade: false,
slidesToShow : 3, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 3, //스크롤 한번에 움직일 컨텐츠 개수
arrows : true, // 옆으로 이동하는 화살표 표시 여부
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
dots : false, // 스크롤바 아래 점으로 페이지네이션 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 10000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
prevArrow : "Previous", // 이전 화살표 모양 설정
nextArrow : "Next", // 다음 화살표 모양 설정,
dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정
responsive: [ // 반응형 웹 구현 옵션
{
breakpoint: 1300, //화면 사이즈 960px
settings: {
//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
slidesToShow:2,
slidesToScroll : 2,
}
},
{
breakpoint: 768, //화면 사이즈 768px
settings: {
//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
slidesToShow:1,
slidesToScroll : 1,
}
}
]
});