$(function () {
// var mainslide = new Swiper('#main-slider2', {
// slidesPerView: 1,
// spaceBetween: 0,
// slidesPerGroup: 1,
// loop: true,
// autoplay: true,
// loopFillGroupWithBlank: true,
// navigation: {
// nextEl: '.main-next',
// prevEl: '.main-prev',
// },
// });
var $status = $('.pagingInfo');
var $slickElement = $('#main-slider');
$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 + "" + "" + "/" + "" + "" + "03"+ "" + "
");
});
//메인슬라이드
$('#main-slider').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
fade: false,
infinite: true, //무한 반복 옵션
lazyLoad: 'progressive',
slidesToShow: 1, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll: 1, //스크롤 한번에 움직일 컨텐츠 개수
speed: 1000, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
lazyLoad: 'progressive',
arrows: true, // 옆으로 이동하는 화살표 표시 여부
autoplay: true, // 자동 스크롤 사용 여부
autoplaySpeed: 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover: true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical: false, // 세로 방향 슬라이드 옵션
prevArrow: "", // 이전 화살표 모양 설정
nextArrow: "", // 다음 화살표 모양 설정
draggable: false, //드래그 가능 여부
pauseOnHover: false,
pauseOnFocus: false,
});
let time = 0;
let interval;
let timeSet;
let duration = 5;
$(".main-slider").on('afterChange', function () {
time = 0;
duration = 5;
$(".pro-bar").addClass('pro-ani');
$(".pro-ani").css({
'animation-duration': '5s',
})
timeSet = setInterval(function () {
duration--;
}, 1000)
});
$(".main-slider").on('beforeChange', function () {
$(".pro-bar").removeClass('pro-ani');
clearInterval(timeSet);
});
$(".main_slide").on('mouseenter', function () {
interval = setInterval(function () {
time = time + 1;
}, 1000)
})
$(".main_slide").on('mouseleave ', function () {
clearInterval(interval);
$(".pro-ani").css({
'animation-duration': duration + time + 's',
})
duration = duration + time;
console.log(duration, time)
time = 0;
})
//갤러리슬라이드
$('.gallerybbs>tbody').addClass('swiper-container gallery-container');
$('.gallerybbs>tbody>tr').addClass('swiper-wrapper');
$('.gallerybbs>tbody>tr>td').addClass('swiper-slide');
var swiper1 = new Swiper('.gallery-container', {
slidesPerView: 2,
spaceBetween: 15,
slidesPerGroup: 1,
loop: true,
autoplay: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.next-btn-01',
prevEl: '.prev-btn-01',
},
breakpoints: {
575: {
slidesPerView: 1,
spaceBetween: 20,
centeredSlides: true,
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
}
});
//products 슬라이드
var swiper2 = new Swiper('.main_products', {
slidesPerView: 1,
spaceBetween: 20,
initialSlide: 1,
slidesPerGroup: 1,
loop: true,
autoplay: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.prod-next',
prevEl: '.prod-prev',
},
});
})