팝업으로 슬릭 슬라이더 오토슬라이드 멈춤 질문입니다!
본문
안녕하세요 고수님들 ㅠㅠ
제가 팝업 슬라이드를 코딩을 쳤습니다
다만, 팝업을 닫았을 때 오토슬라이드가 정지되어야 하는데 어떻게 하는지 모르겠네요...
function close_pop(flag){
$(".por-popup").hide();
};
$('.pop-bg').click(function(){
$('.popup-slide-1').slick('slickPause');
});
$(function(){
$('#por-popup-button1').click(function(){
$('.por-popup-1').show();
$('.popup-slide-1').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : false, //무한 반복 옵션
slidesToShow : 1, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
draggable : true, //드래그 가능 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
dotsClass : "custom_paging", //아래 나오는 페이지네이션(점) css class 지정
customPaging: function (slider, i) {
//FYI just have a look at the object to find available information
//press f12 to access the console in most browsers
//you could also debug or look in the source
console.log(slider);
return (i + 1) + '/' + slider.slideCount;
}
});
});
});
이런식으로 팝업 슬라이드가 7개가 있습니다 ㅠㅠ
그래서 위 코드를 반복해서 7개 쳤는데요..
1. 팝업 닫기를 누르면! 즉,
$('.pop-bg').click(function(){
$('.popup-slide-1').slick('slickPause');
}); 이 부분이 작동하지를 않습니다.
그리고 팝업을 열고 닫을때마다 개발자도구에서 오류가 났다고 엄청 뜹니다 ㅠㅠ
2. 자바스크립트를 엄청 반복해서 쳤는데.. 혹시 for문같은걸 이용하여서 간단하게 만들수있나요?
// 정지 감춤 재실행 등
function close_pop(flag){
$(".por-popup").hide();
};
$('.pop-bg').click(function(){
$('.popup-slide-1').slick('slickPause');
$('.popup-slide-2').slick('slickPause');
$('.popup-slide-3').slick('slickPause');
$('.popup-slide-4').slick('slickPause');
$('.popup-slide-5').slick('slickPause');
$('.popup-slide-6').slick('slickPause');
});
$(function(){
$('#por-popup-button1').click(function(){
$('.por-popup-1').show();
$('.popup-slide-1').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : false, //무한 반복 옵션
slidesToShow : 1, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
draggable : true, //드래그 가능 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
dotsClass : "custom_paging", //아래 나오는 페이지네이션(점) css class 지정
customPaging: function (slider, i) {
//FYI just have a look at the object to find available information
//press f12 to access the console in most browsers
//you could also debug or look in the source
console.log(slider);
return (i + 1) + '/' + slider.slideCount;
}
});
});
});
$(function(){
$('#por-popup-button2').click(function(){
$('.por-popup-2').show();
$('.popup-slide-2').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : false, //무한 반복 옵션
slidesToShow : 1, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
draggable : true, //드래그 가능 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
dotsClass : "custom_paging", //아래 나오는 페이지네이션(점) css class 지정
customPaging: function (slider, i) {
//FYI just have a look at the object to find available information
//press f12 to access the console in most browsers
//you could also debug or look in the source
console.log(slider);
return (i + 1) + '/' + slider.slideCount;
}
});
});
});
$(function(){
$('#por-popup-button3').click(function(){
$('.por-popup-3').show();
$('.popup-slide-3').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : false, //무한 반복 옵션
slidesToShow : 1, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
draggable : true, //드래그 가능 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
dotsClass : "custom_paging", //아래 나오는 페이지네이션(점) css class 지정
customPaging: function (slider, i) {
//FYI just have a look at the object to find available information
//press f12 to access the console in most browsers
//you could also debug or look in the source
console.log(slider);
return (i + 1) + '/' + slider.slideCount;
}
});
});
});
$(function(){
$('#por-popup-button4').click(function(){
$('.por-popup-4').show();
$('.popup-slide-4').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : false, //무한 반복 옵션
slidesToShow : 1, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
draggable : true, //드래그 가능 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
dotsClass : "custom_paging", //아래 나오는 페이지네이션(점) css class 지정
customPaging: function (slider, i) {
//FYI just have a look at the object to find available information
//press f12 to access the console in most browsers
//you could also debug or look in the source
console.log(slider);
return (i + 1) + '/' + slider.slideCount;
}
});
});
});
$(function(){
$('#por-popup-button5').click(function(){
$('.por-popup-5').show();
$('.popup-slide-5').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : false, //무한 반복 옵션
slidesToShow : 1, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
draggable : true, //드래그 가능 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
dotsClass : "custom_paging", //아래 나오는 페이지네이션(점) css class 지정
customPaging: function (slider, i) {
//FYI just have a look at the object to find available information
//press f12 to access the console in most browsers
//you could also debug or look in the source
console.log(slider);
return (i + 1) + '/' + slider.slideCount;
}
});
});
});
$(function(){
$('#por-popup-button6').click(function(){
$('.por-popup-6').show();
$('.popup-slide-6').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : false, //무한 반복 옵션
slidesToShow : 1, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
draggable : true, //드래그 가능 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
dotsClass : "custom_paging", //아래 나오는 페이지네이션(점) css class 지정
customPaging: function (slider, i) {
//FYI just have a look at the object to find available information
//press f12 to access the console in most browsers
//you could also debug or look in the source
console.log(slider);
return (i + 1) + '/' + slider.slideCount;
}
});
});
});
답변 1
여러개 컨트롤해야하니까
클래스와 data로 관리하고요
slick 이 한번 initialize 되었을때 다시 initialize 하면 에러나더라고요
destroy 하고 다시 실행해야겠지만
그렇게 되면 슬라이드 순번이 초기화 되어서
배열 변수 하나 잡고
slick init 할때 배열에 넣어서 컨트롤
<div class="por-popup" data-popup="1" style="display: none;">
<div class="slider popup-slide">
<div><h3>1-1</h3></div>
<div><h3>1-2</h3></div>
<div><h3>1-3</h3></div>
<div><h3>1-4</h3></div>
<div><h3>1-5</h3></div>
<div><h3>1-6</h3></div>
</div>
<div><button type="button" class="por-close">Close</button></div>
</div>
<div class="por-popup" data-popup="2" style="display: none;">
<div class="slider popup-slide">
<div><h3>2-1</h3></div>
<div><h3>2-2</h3></div>
<div><h3>2-3</h3></div>
<div><h3>2-4</h3></div>
<div><h3>2-5</h3></div>
<div><h3>2-6</h3></div>
</div>
<div><button type="button" class="por-close">Close</button></div>
</div>
<div class="por-popup" data-popup="3" style="display: none;">
<div class="slider popup-slide">
<div><h3>3-1</h3></div>
<div><h3>3-2</h3></div>
<div><h3>3-3</h3></div>
<div><h3>3-4</h3></div>
<div><h3>3-5</h3></div>
<div><h3>3-6</h3></div>
</div>
<div><button type="button" class="por-close">Close</button></div>
</div>
<div class="por-popup" data-popup="4" style="display: none;">
<div class="slider popup-slide">
<div><h3>4-1</h3></div>
<div><h3>4-2</h3></div>
<div><h3>4-3</h3></div>
<div><h3>4-4</h3></div>
<div><h3>4-5</h3></div>
<div><h3>4-6</h3></div>
</div>
<div><button type="button" class="por-close">Close</button></div>
</div>
<br>
<br>
<button type="button" class="por-popup-button" data-index="1">1</button>
<button type="button" class="por-popup-button" data-index="2">2</button>
<button type="button" class="por-popup-button" data-index="3">3</button>
<button type="button" class="por-popup-button" data-index="4">4</button>
<button type="button" class="por-popup-button" data-index="5">5 없음</button>
<script>
var _slick = [];
$(function(){
$('.por-popup-button').on('click', function(){
var $this = $(this),
index = $this.data('index') || '',
$popup = $('.por-popup[data-popup="' + index + '"]'),
$slide = $popup.find('.popup-slide');
if (!$slide) return;
$popup.show();
if (_slick[index]) {
_slick[index].slick('slickPlay');
} else {
_slick[index] = $slide.slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : false, //무한 반복 옵션
slidesToShow : 1, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 1000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
draggable : true, //드래그 가능 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
dotsClass : "custom_paging", //아래 나오는 페이지네이션(점) css class 지정
customPaging: function (slider, i) {
//FYI just have a look at the object to find available information
//press f12 to access the console in most browsers
//you could also debug or look in the source
//console.log(slider);
return (i + 1) + '/' + slider.slideCount;
}
});
}
});
$('.por-close').on('click', function() {
var $this = $(this),
$popup = $this.closest('.por-popup'),
$slide = $popup.find('.popup-slide'),
index = $popup.data('popup');
_slick[index].slick('slickPause');
$popup.hide();
});
});
</script>
아직 초보라 모르는 것들이 많지만 공부가 많이 될거같습니다 감사합니다 ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.