$(function(){ var $status = $('.pagingInfo'); var $slickElement = $('.main-visual-slide'); $slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) { //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based) var i = (currentSlide ? currentSlide : 0) + 1; $status.html("
" + "0" + i + "
" + "" + "0" + slick.slideCount + "
"); }); //메인슬라이드 $slickElement.not('.slick-initialized').slick({ slide: 'div', //슬라이드 되어야 할 태그 ex) div, li //fade: true, infinite: true, //무한 반복 옵션 slidesToShow: 1, // 한 화면에 보여질 컨텐츠 개수 slidesToScroll: 1, //스크롤 한번에 움직일 컨텐츠 개수 speed: 500, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms) lazyLoad: 'progressive', arrows: true, // 옆으로 이동하는 화살표 표시 여부 autoplay: true, // 자동 스크롤 사용 여부 autoplaySpeed: 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms) vertical: false, // 세로 방향 슬라이드 옵션 prevArrow: $(".slick-prev"), // 이전 화살표 모양 설정 nextArrow: $(".slick-next"), // 다음 화살표 모양 설정 draggable: true, //드래그 가능 여부 pauseOnFocus: false, pauseOnHover: false, prevArrow: '.main-visual-controls .prev-btn', nextArrow: '.main-visual-controls .next-btn', }); let time = 0; let interval; let timeSet; let duration = 5; $(".main-visual-slide").on('afterChange', function () { time = 0; duration = 5; $(".pro-bar").addClass('pro-ani'); $(".pro-ani").css({ 'animation-duration': '5s', }) timeSet = setInterval(function () { duration--; }, 1000) }); $(".main-visual-slide").on('beforeChange', function () { $(".pro-bar").removeClass('pro-ani'); clearInterval(timeSet); }); $('.main-product-list').slick({ slidesToShow: 4, // 한 화면에 보여질 컨텐츠 개수 slidesToScroll: 1, //스크롤 한번에 움직일 컨텐츠 개수 speed: 1000, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms) lazyLoad: 'progressive', arrows: true, // 옆으로 이동하는 화살표 표시 여부 autoplay: true, // 자동 스크롤 사용 여부 autoplaySpeed: 8000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms) vertical: false, // 세로 방향 슬라이드 옵션 prevArrow: $(".slick-prev"), // 이전 화살표 모양 설정 nextArrow: $(".slick-next"), // 다음 화살표 모양 설정 draggable: true, //드래그 가능 여부 pauseOnFocus: false, pauseOnHover: false, prevArrow: '.main-product-controls .prev-btn', nextArrow: '.main-product-controls .next-btn', responsive: [ // 반응형 웹 구현 옵션 { breakpoint: 1500, //화면 사이즈 1500px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:2 } }, { breakpoint: 1023, //화면 사이즈 768px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:1 } } ] }); });