slider3 [slick] slider 실행 시 콜백(callback) 이벤트 슬릭(slick) 슬라이더(slider) 실행 전/후 콜백(callback) 이벤트 [html] item01 item02 item03 item04 item05 [css] .my-slider { position: relative; } .my-slider .slick-slide { height: 100px; border: 1px solid blue; box-sizing: border-box; text-align: center; } .slick-arrow { position: absolute; bottom: -30px; left: 0; } .slick-arrow.slick-next { left: 80px; } p { font-size: 30px; text-align: center; } [js] $('.my-s.. 2023. 7. 26. [slick] slider에서 재생 / 정지 버튼 추가 slick slider(슬릭 슬라이더)에서 오토 슬라이드 재생 / 정지 버튼 추가하기 [html] 재생 정지 [css] .slick-test{ width: 600px; overflow: hidden; outline: 1px solid blue; } .slick-test .slick-list{ margin: 0 -10px; } .slick-test .slick-slide{ height: 200px; margin: 0 10px; background: skyblue; } [js] $(document).ready(function(){ $('.slick-test').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, autoplay: true, autoplay.. 2023. 6. 22. [slick] slider에서 margin(여백) 만드는 법 slick slider(슬릭 슬라이더)에서 width 1200px 슬라이더에 margin(여백) 30px 만들기 [html] [css] .slick-margin{ width: 1200px; overflow: hidden; outline: 1px solid red; } .slick-margin .slick-list{ margin: 0 -15px; } .slick-margin .slick-slide{ height: 200px; margin: 0 15px; background: pink; } [js] $('.slick-margin').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, }); See the Pen slick slider margin _ 슬릭.. 2023. 5. 31. 이전 1 다음 728x90
