팝업으로 슬릭 슬라이더 오토슬라이드 멈춤 질문입니다! 채택완료

와로 4년 전 조회 3,925

안녕하세요 고수님들 ㅠㅠ

제가 팝업 슬라이드를 코딩을 쳤습니다

다만, 팝업을 닫았을 때 오토슬라이드가 정지되어야 하는데 어떻게 하는지 모르겠네요...

</p>

<p>function close_pop(flag){</p>

<p>    $(".por-popup").hide();</p>

<p>};</p>

<p> </p>

<p>$('.pop-bg').click(function(){</p>

<p>    $('.popup-slide-1').slick('slickPause');</p>

<p> </p>

<p>});</p>

<p>

 </p>

<p>$(function(){</p>

<p>    $('#por-popup-button1').click(function(){</p>

<p>        $('.por-popup-1').show();</p>

<p>        $('.popup-slide-1').slick({</p>

<p>            slide: 'div',        //슬라이드 되어야 할 태그 ex) div, li </p>

<p>            infinite : false,     //무한 반복 옵션     </p>

<p>            slidesToShow : 1,        // 한 화면에 보여질 컨텐츠 개수</p>

<p>            slidesToScroll : 1,        //스크롤 한번에 움직일 컨텐츠 개수</p>

<p>            speed : 100,     // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)</p>

<p>            arrows : true,         // 옆으로 이동하는 화살표 표시 여부</p>

<p>            autoplay : true,            // 자동 스크롤 사용 여부</p>

<p>            autoplaySpeed : 5000,         // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)</p>

<p>            pauseOnHover : true,        // 슬라이드 이동    시 마우스 호버하면 슬라이더 멈추게 설정</p>

<p>            vertical : false,        // 세로 방향 슬라이드 옵션</p>

<p>            draggable : true,     //드래그 가능 여부 </p>

<p>            dots : true,        // 스크롤바 아래 점으로 페이지네이션 여부</p>

<p>            dotsClass : "custom_paging",    //아래 나오는 페이지네이션(점) css class 지정</p>

<p>            customPaging: function (slider, i) {</p>

<p>            //FYI just have a look at the object to find available information</p>

<p>            //press f12 to access the console in most browsers</p>

<p>            //you could also debug or look in the source</p>

<p>            console.log(slider);</p>

<p>            return  (i + 1) + '/' + slider.slideCount;</p>

<p>        }</p>

<p>        });</p>

<p>    });</p>

<p>});</p>

<p> </p>

<p>

이런식으로 팝업 슬라이드가 7개가 있습니다 ㅠㅠ

그래서 위 코드를 반복해서 7개 쳤는데요..

1. 팝업 닫기를 누르면! 즉,

$('.pop-bg').click(function(){

$('.popup-slide-1').slick('slickPause');

}); 이 부분이 작동하지를 않습니다.

그리고 팝업을 열고 닫을때마다 개발자도구에서 오류가 났다고 엄청 뜹니다 ㅠㅠ

2. 자바스크립트를 엄청 반복해서 쳤는데.. 혹시 for문같은걸 이용하여서 간단하게 만들수있나요?

</p>

<p>// 정지 감춤 재실행 등</p>

<p> </p>

<p>function close_pop(flag){</p>

<p>    $(".por-popup").hide();</p>

<p> </p>

<p>};</p>

<p> </p>

<p>$('.pop-bg').click(function(){</p>

<p>    $('.popup-slide-1').slick('slickPause');</p>

<p>    $('.popup-slide-2').slick('slickPause');</p>

<p>    $('.popup-slide-3').slick('slickPause');</p>

<p>    $('.popup-slide-4').slick('slickPause');</p>

<p>    $('.popup-slide-5').slick('slickPause');</p>

<p>    $('.popup-slide-6').slick('slickPause');</p>

<p>});</p>

<p>

 </p>

<p>$(function(){</p>

<p>    $('#por-popup-button1').click(function(){</p>

<p>        $('.por-popup-1').show();</p>

<p>        $('.popup-slide-1').slick({</p>

<p>            slide: 'div',        //슬라이드 되어야 할 태그 ex) div, li </p>

<p>            infinite : false,     //무한 반복 옵션     </p>

<p>            slidesToShow : 1,        // 한 화면에 보여질 컨텐츠 개수</p>

<p>            slidesToScroll : 1,        //스크롤 한번에 움직일 컨텐츠 개수</p>

<p>            speed : 100,     // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)</p>

<p>            arrows : true,         // 옆으로 이동하는 화살표 표시 여부</p>

<p>            autoplay : true,            // 자동 스크롤 사용 여부</p>

<p>            autoplaySpeed : 5000,         // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)</p>

<p>            pauseOnHover : true,        // 슬라이드 이동    시 마우스 호버하면 슬라이더 멈추게 설정</p>

<p>            vertical : false,        // 세로 방향 슬라이드 옵션</p>

<p>            draggable : true,     //드래그 가능 여부 </p>

<p>            dots : true,        // 스크롤바 아래 점으로 페이지네이션 여부</p>

<p>            dotsClass : "custom_paging",    //아래 나오는 페이지네이션(점) css class 지정</p>

<p>            customPaging: function (slider, i) {</p>

<p>            //FYI just have a look at the object to find available information</p>

<p>            //press f12 to access the console in most browsers</p>

<p>            //you could also debug or look in the source</p>

<p>            console.log(slider);</p>

<p>            return  (i + 1) + '/' + slider.slideCount;</p>

<p>        }</p>

<p>        });</p>

<p>    });</p>

<p>});</p>

<p>





 </p>

<p>$(function(){</p>

<p>    $('#por-popup-button2').click(function(){</p>

<p>        $('.por-popup-2').show();</p>

<p>        $('.popup-slide-2').slick({</p>

<p>            slide: 'div',        //슬라이드 되어야 할 태그 ex) div, li </p>

<p>            infinite : false,     //무한 반복 옵션     </p>

<p>            slidesToShow : 1,        // 한 화면에 보여질 컨텐츠 개수</p>

<p>            slidesToScroll : 1,        //스크롤 한번에 움직일 컨텐츠 개수</p>

<p>            speed : 100,     // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)</p>

<p>            arrows : true,         // 옆으로 이동하는 화살표 표시 여부</p>

<p>            autoplay : true,            // 자동 스크롤 사용 여부</p>

<p>            autoplaySpeed : 5000,         // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)</p>

<p>            pauseOnHover : true,        // 슬라이드 이동    시 마우스 호버하면 슬라이더 멈추게 설정</p>

<p>            vertical : false,        // 세로 방향 슬라이드 옵션</p>

<p>            draggable : true,     //드래그 가능 여부 </p>

<p>            dots : true,        // 스크롤바 아래 점으로 페이지네이션 여부</p>

<p>            dotsClass : "custom_paging",    //아래 나오는 페이지네이션(점) css class 지정</p>

<p>            customPaging: function (slider, i) {</p>

<p>            //FYI just have a look at the object to find available information</p>

<p>            //press f12 to access the console in most browsers</p>

<p>            //you could also debug or look in the source</p>

<p>            console.log(slider);</p>

<p>            return  (i + 1) + '/' + slider.slideCount;</p>

<p>        }</p>

<p>        });</p>

<p>    });</p>

<p> </p>

<p>});</p>

<p>



 </p>

<p>$(function(){</p>

<p>    $('#por-popup-button3').click(function(){</p>

<p>        $('.por-popup-3').show();</p>

<p>        $('.popup-slide-3').slick({</p>

<p>            slide: 'div',        //슬라이드 되어야 할 태그 ex) div, li </p>

<p>            infinite : false,     //무한 반복 옵션     </p>

<p>            slidesToShow : 1,        // 한 화면에 보여질 컨텐츠 개수</p>

<p>            slidesToScroll : 1,        //스크롤 한번에 움직일 컨텐츠 개수</p>

<p>            speed : 100,     // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)</p>

<p>            arrows : true,         // 옆으로 이동하는 화살표 표시 여부</p>

<p>            autoplay : true,            // 자동 스크롤 사용 여부</p>

<p>            autoplaySpeed : 5000,         // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)</p>

<p>            pauseOnHover : true,        // 슬라이드 이동    시 마우스 호버하면 슬라이더 멈추게 설정</p>

<p>            vertical : false,        // 세로 방향 슬라이드 옵션</p>

<p>            draggable : true,     //드래그 가능 여부 </p>

<p>            dots : true,        // 스크롤바 아래 점으로 페이지네이션 여부</p>

<p>            dotsClass : "custom_paging",    //아래 나오는 페이지네이션(점) css class 지정</p>

<p>            customPaging: function (slider, i) {</p>

<p>            //FYI just have a look at the object to find available information</p>

<p>            //press f12 to access the console in most browsers</p>

<p>            //you could also debug or look in the source</p>

<p>            console.log(slider);</p>

<p>            return  (i + 1) + '/' + slider.slideCount;</p>

<p>        }</p>

<p>        });</p>

<p>    });</p>

<p> </p>

<p>});</p>

<p>





 </p>

<p>$(function(){</p>

<p>    $('#por-popup-button4').click(function(){</p>

<p>        $('.por-popup-4').show();</p>

<p>        $('.popup-slide-4').slick({</p>

<p>            slide: 'div',        //슬라이드 되어야 할 태그 ex) div, li </p>

<p>            infinite : false,     //무한 반복 옵션     </p>

<p>            slidesToShow : 1,        // 한 화면에 보여질 컨텐츠 개수</p>

<p>            slidesToScroll : 1,        //스크롤 한번에 움직일 컨텐츠 개수</p>

<p>            speed : 100,     // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)</p>

<p>            arrows : true,         // 옆으로 이동하는 화살표 표시 여부</p>

<p>            autoplay : true,            // 자동 스크롤 사용 여부</p>

<p>            autoplaySpeed : 5000,         // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)</p>

<p>            pauseOnHover : true,        // 슬라이드 이동    시 마우스 호버하면 슬라이더 멈추게 설정</p>

<p>            vertical : false,        // 세로 방향 슬라이드 옵션</p>

<p>            draggable : true,     //드래그 가능 여부 </p>

<p>            dots : true,        // 스크롤바 아래 점으로 페이지네이션 여부</p>

<p>            dotsClass : "custom_paging",    //아래 나오는 페이지네이션(점) css class 지정</p>

<p>            customPaging: function (slider, i) {</p>

<p>            //FYI just have a look at the object to find available information</p>

<p>            //press f12 to access the console in most browsers</p>

<p>            //you could also debug or look in the source</p>

<p>            console.log(slider);</p>

<p>            return  (i + 1) + '/' + slider.slideCount;</p>

<p>        }</p>

<p>        });</p>

<p>    });</p>

<p> </p>

<p>});</p>

<p> </p>

<p>$(function(){</p>

<p>    $('#por-popup-button5').click(function(){</p>

<p>        $('.por-popup-5').show();</p>

<p>        $('.popup-slide-5').slick({</p>

<p>            slide: 'div',        //슬라이드 되어야 할 태그 ex) div, li </p>

<p>            infinite : false,     //무한 반복 옵션     </p>

<p>            slidesToShow : 1,        // 한 화면에 보여질 컨텐츠 개수</p>

<p>            slidesToScroll : 1,        //스크롤 한번에 움직일 컨텐츠 개수</p>

<p>            speed : 100,     // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)</p>

<p>            arrows : true,         // 옆으로 이동하는 화살표 표시 여부</p>

<p>            autoplay : true,            // 자동 스크롤 사용 여부</p>

<p>            autoplaySpeed : 5000,         // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)</p>

<p>            pauseOnHover : true,        // 슬라이드 이동    시 마우스 호버하면 슬라이더 멈추게 설정</p>

<p>            vertical : false,        // 세로 방향 슬라이드 옵션</p>

<p>            draggable : true,     //드래그 가능 여부 </p>

<p>            dots : true,        // 스크롤바 아래 점으로 페이지네이션 여부</p>

<p>            dotsClass : "custom_paging",    //아래 나오는 페이지네이션(점) css class 지정</p>

<p>            customPaging: function (slider, i) {</p>

<p>            //FYI just have a look at the object to find available information</p>

<p>            //press f12 to access the console in most browsers</p>

<p>            //you could also debug or look in the source</p>

<p>            console.log(slider);</p>

<p>            return  (i + 1) + '/' + slider.slideCount;</p>

<p>        }</p>

<p>        });</p>

<p>    });</p>

<p>});</p>

<p>

 </p>

<p>$(function(){</p>

<p>    $('#por-popup-button6').click(function(){</p>

<p>        $('.por-popup-6').show();</p>

<p>        $('.popup-slide-6').slick({</p>

<p>            slide: 'div',        //슬라이드 되어야 할 태그 ex) div, li </p>

<p>            infinite : false,     //무한 반복 옵션     </p>

<p>            slidesToShow : 1,        // 한 화면에 보여질 컨텐츠 개수</p>

<p>            slidesToScroll : 1,        //스크롤 한번에 움직일 컨텐츠 개수</p>

<p>            speed : 100,     // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)</p>

<p>            arrows : true,         // 옆으로 이동하는 화살표 표시 여부</p>

<p>            autoplay : true,            // 자동 스크롤 사용 여부</p>

<p>            autoplaySpeed : 5000,         // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)</p>

<p>            pauseOnHover : true,        // 슬라이드 이동    시 마우스 호버하면 슬라이더 멈추게 설정</p>

<p>            vertical : false,        // 세로 방향 슬라이드 옵션</p>

<p>            draggable : true,     //드래그 가능 여부 </p>

<p>            dots : true,        // 스크롤바 아래 점으로 페이지네이션 여부</p>

<p>            dotsClass : "custom_paging",    //아래 나오는 페이지네이션(점) css class 지정</p>

<p>            customPaging: function (slider, i) {</p>

<p>            //FYI just have a look at the object to find available information</p>

<p>            //press f12 to access the console in most browsers</p>

<p>            //you could also debug or look in the source</p>

<p>            console.log(slider);</p>

<p>            return  (i + 1) + '/' + slider.slideCount;</p>

<p>        }</p>

<p>        });</p>

<p>    });</p>

<p>});</p>

<p> </p>

<p>

#javascript #slick

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

Big1

4년 전

여러개 컨트롤해야하니까

클래스와 data로 관리하고요

slick 이 한번 initialize 되었을때 다시 initialize 하면 에러나더라고요

destroy 하고 다시 실행해야겠지만

그렇게 되면 슬라이드 순번이 초기화 되어서

배열 변수 하나 잡고

slick init 할때 배열에 넣어서 컨트롤

</p>

<p><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></p>

<p>





<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></p>

<p><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');</p>

<p>        if (!$slide) return;</p>

<p>        $popup.show();</p>

<p>        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;

                }

            });

        }

    });</p>

<p>    $('.por-close').on('click', function() {

        var $this = $(this),

            $popup = $this.closest('.por-popup'),

            $slide = $popup.find('.popup-slide'),

            index = $popup.data('popup');</p>

<p>        _slick[index].slick('slickPause');

        $popup.hide();

    });

});

</script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�

와로

4년 전

아직 초보라 모르는 것들이 많지만 공부가 많이 될거같습니다 감사합니다 ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

팝업으로 슬릭 슬라이더 오토슬라이드 멈춤 질문입니다! 채택완료

답변 1개

답변에 대한 댓글 1개

공유하기