슬라이드 배너 Swiper Slide#3
* slick slider - centermode 의 디스플레이가 필요 하지만 익숙한 swiper slide 작업 
- Slide List 초기값은 파라미터 num( value 1~4)에 따라 array로 정렬해서 보여짐

=> https://www.relation.co.kr/images_board/board_system_publishing/245/index3.php


** 적용옵션 정리 
1. 특정 슬러이더로 이동
 1) swiper.slideTo((이동할 슬라이드 번호index), (속도), runCallback);
'속도' 매개변수와 동일한 기간 동안 '인덱스' 매개변수와 동일한 색인 번호를 사용하여
슬라이드로 전환을 실행합니다.

swiper.slideTo(1,3000,false);

2) .slideTo와 동일하지만 활성화된 루프와 함께 사용되는 경우,
전달된 인덱스와 일치하는 realIndex가 있는 슬라이드로 이동

swiper.slideToLoop(이동할 슬라이드 번호(index), 속도, runCallback);
swiper.slideToLoop(index, speed, runCallbacks)


loop: true -> realIndex
loop: false -> activeIndex


javascript

$(document).ready(function(){
            var sp_slide = new Swiper('#sp_visual', {
                slidesPerView: 5,
                slidesPerGroup: 1,  /* 한번에 보여줄 갯수를 자동으로 지정 slidesPerGroup 와 같은 값을 지정 */
                spaceBetween: 20,     /* 슬라이더 간의 여백 padding값 */
                centeredSlides: true,
                //watchOverflow: true,
                autoplay: { 
                    delay: 3000, 
                    disableOnInteraction: false 
                },
                loop: true,
                loopedSlides: 3,  /*  duplication */
                slidesOffsetBefore : -40, // 슬라이드 시작 부분 여백
                slidesOffsetAfter : 0,
                
            });
            
            loop: true인 경우엔 realIndex
            loop: false인 경우에 activeIndex 를 사용합니다.
            
            });

            $("#sp_visual .swiper-slide").click( function(){
                    var num = $(this).data("cidx");
                    var ch_idx = $(this).data("swiper-slide-index");
                    console.log("ch_idx_", ch_idx);
                    sp_slidetit.slideTo(num-1, 1000, false);
                    sp_slide.slideToLoop(ch_idx, 300, false);  /*sp_slide.slideTo(ch_idx, 300, false); */
                    
                    $(".evt_slideWrap").slideUp();
                    sp_slide.autoplay.stop();
                    $("._evt_btnArea").removeClass("_off").addClass("_on");
                    $("._evt_btnArea._on > span").text("닫기");

                    $(".content_area").removeClass("_on").addClass("_off");
                    for(let i = 0; i < 5; i++){
                            const startIndex = i * 2;
                            const endIndex = startIndex + 3;
                            if (num > startIndex && num < endIndex){
                                $(`.content_area:eq(${i})`).removeClass("_off").addClass("_on");
                                break; // 조건에 해당하는 content_area를 찾았으므로 반복문 종료
                            }
                    }
                    /*
                    if(num < 3){
                        $(".content_area:eq(0)").removeClass("_off").addClass("_on");
                    }else if( num > 2 && num < 5){
                        $(".content_area:eq(1)").removeClass("_off").addClass("_on");
                    }else if( num > 4 && num < 7){
                        $(".content_area:eq(2)").removeClass("_off").addClass("_on");
                    }else if( num > 6 && num < 9){
                        $(".content_area:eq(3)").removeClass("_off").addClass("_on");
                    }else if( num > 8 && num < 11){
                        $(".content_area:eq(4)").removeClass("_off").addClass("_on");
                    }
                    */
            });

            $("._evt_btnArea").click( function(){
                $(".content_area").removeClass("_on").addClass("_off");

                if( $(this).hasClass("_off") == true){
                    $(".evt_slideWrap").slideUp();
                    sp_slide.autoplay.stop();
                    $(this).removeClass("_off").addClass("_on");
                    $("._evt_btnArea._on > span").text("열기");
                    
                }else if( $(this).hasClass("_on") == true){
                    $(".evt_slideWrap").slideDown();
                    sp_slide.autoplay.start();
                    $(this).removeClass("_on").addClass("_off");
                    $("._evt_btnArea._off > span").text("닫기");
                }
            });
        });