슬라이드 배너 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("닫기");
}
});
});