swiper) slideTo()를 써보자!

 

안녕하세요 찐망고입니다.

거두절미하구 포스팅 시작!

 

https://www.imele.co.kr/

아이멜리

학생이 여기 있는 

Best Product섹션의 슬라이드를 따라하고 싶어해서 만들어보았습니다.

아 저 사이트는 slick을 사용하였는데  이번반 slick적용하는 수업을 안했음.. 

그래서 swiper로 만들어 볼게요~

 

일단 두개의 swiper를 만들어서 swiper.controller.control를 이용해서 연결해보려고 했는데..

실패했습니다. 계속 충돌해서 swiper-slide-active가 움직이지 않고 고정되는 바람에.. 🤣🤣

 

그래서 사용한 방법

// HTML

<!-- 텍스트 swiper -->
<div class="swiper best-txt-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="info">
                    <div class="desc">
                        <p>피부에 전하는 청귤 세럼의 빛<br>2주 잡티 이별 세럼</p>
                    </div>
                    <div class="tl">
                        <div class="name">
                            <h3>청귤 비타C 잡티 케어 세럼</h3>
                            <span class="eng">Green tangerine vitaC dark spot care serum</span>
                        </div>
                        <a href="#" class="shop"><span>shop now</span></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="info">
                    <div class="desc">
                        <p>각질은 케어하고 생기는 더해주는 토너대신 노란통 패드<br>청귤 비타C 라인의 첫 단계</p>
                    </div>
                    <div class="tl">
                        <div class="name">
                            <h3>청귤 비타C 토너패드 플러스</h3>
                            <span class="eng">Green tangerine vitaC toner pad+</span>
                        </div>
                        <a href="#" class="shop"><span>shop now</span></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="info">
                    <div class="desc">
                        <p>각질은 케어하고 생기는 더해주는 토너대신 패드<br>청귤 비타C 라인의 첫 단계</p>
                    </div>
                    <div class="tl">
                        <div class="name">
                            <h3>맑은 어성초 진정 토너패드</h3>
                            <span class="eng">Houttuynia cordata calming toner pad</span>
                        </div>
                        <a href="#" class="shop"><span>shop now</span></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="info">
                    <div class="desc">
                        <p>데일리로 사용이 가능한 순한 저자극<br>청귤 비타C 잡티케어 세럼 마스크</p>
                    </div>
                    <div class="tl">
                        <div class="name">
                            <h3>청귤 비타C 잡티케어 세럼 마스크</h3>
                            <span class="eng">Green tangerine vitaC dark spot care serum mask</span>
                        </div>
                        <a href="#" class="shop"><span>shop now</span></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="info">
                    <div class="desc">
                        <p>피부에 전하는 청귤 세럼의 빛<br>맑은 어성초 진정 마스크</p>
                    </div>
                    <div class="tl">
                        <div class="name">
                            <h3>맑은 어성초 진정 마스크</h3>
                            <span class="eng">Houttuynia cordata calming moisture care sheet mask</span>
                        </div>
                        <a href="#" class="shop"><span>shop now</span></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="info">
                    <div class="desc">
                        <p>피부에 전하는 청귤 세럼의 빛<br>2주 잡티 이별 세럼</p>
                    </div>
                    <div class="tl">
                        <div class="name">
                            <h3>맑은 어성초 진정 수분 크림</h3>
                            <span class="eng">Houttuynia cordata calming moisture cream</span>
                        </div>
                        <a href="#" class="shop"><span>shop now</span></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="info">
                    <div class="desc">
                        <p>피부에 전하는 청귤 세럼의 빛<br>2주 잡티 이별 세럼</p>
                    </div>
                    <div class="tl">
                        <div class="name">
                            <h3>맑은 어성초 진정 쿨링 선스틱</h3>
                            <span class="eng">Houttuynia cordata calming cooling sun stick</span>
                        </div>
                        <a href="#" class="shop"><span>shop now</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 이미지 swiper -->
    <div class="swiper best-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide product01">
                <a href="#"><span class="hidden">청귤 세럼</span></a>
            </div>
            <div class="swiper-slide product02">
                <a href="#"><span class="hidden">청귤 토너패드</span></a>
            </div>
            <div class="swiper-slide product03">
                <a href="#"><span class="hidden">어성초 토너패드</span></a>
            </div>
            <div class="swiper-slide product04">
                <a href="#"><span class="hidden">청귤 마스크팩</span></a>
            </div>
            <div class="swiper-slide product05">
                <a href="#"><span class="hidden">어성초 마스크팩</span></a>
            </div>
            <div class="swiper-slide product06">
                <a href="#"><span class="hidden">어성초 크림</span></a>
            </div>
            <div class="swiper-slide product07">
                <a href="#"><span class="hidden">어성초 쿨링 선스틱</span></a>
            </div>
        </div>
        <!-- <div class="swiper-pagination"></div> -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

// CSS

.best-slider {
    width: 38%;
    box-sizing: border-box;
	height: 80rem;
	overflow: visible;
}
.best-slider .swiper-slide {
	display: flex;
	justify-content: center;
}
.best-slider .swiper-slide > a {
	display: inline-block;
	width: 40%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.best-slider .product01 > a {
	background-image: url(../img/best-pro01.png);
}
.best-slider .product02 > a {
	background-image: url(../img/best-pro02.png);
}
.best-slider .product03 > a {
	background-image: url(../img/best-pro03.png);
}
.best-slider .product04 > a {
	background-image: url(../img/best-pro04.png);
}
.best-slider .product05 > a {
	background-image: url(../img/best-pro05.png);
}
.best-slider .product06 > a {
	background-image: url(../img/best-pro06.png);
}
.best-slider .product07 > a {
	background-image: url(../img/best-pro07.png);
}

.best-slider .swiper-slide-next,
.best-slider .swiper-slide-prev {
	opacity: 0.4;
}
.best-slider > .swiper-button-prev,
.best-slider > .swiper-button-next {
    width: 4.6rem;
    height: 8.6rem;
}
.best-slider > .swiper-button-prev::after {
    content: "";
	display: block;
    position: absolute;
    top: 0;
    left: -5px;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(0, 0, 0, 0.6);
    transform: rotate(45deg);
    transform-origin: left top;
    border-top: 0;
    border-right: 0;
}
.best-slider > .swiper-button-next::after {
    content: "";
	display: block;
    position: absolute;
    top: -18px;
    left: -95px;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(0, 0, 0, 0.6);
    transform: rotate(-135deg);
    transform-origin: left bottom;
    border-top: 0;
    border-right: 0;
}
.best-txt-slider {
	width: 40%;
	z-index: 20;
	margin-left: 0;
	margin-right: 0;
}

/* 텍스트가 아래서 위로 올라오는 transition */
.best-txt-slider .info {    
	padding: 10rem 0;
	background-color: #fff;
}
.best-txt-slider .info .tl {
	transform: translateY(60px);
	opacity: 0;
	transition: 0.3s;
}
.best-txt-slider .swiper-slide-active .info .tl {
	transform: translateY(0px);
	opacity: 1;
}

// JS

const bestTxtSwiper = new Swiper(".best-txt-slider", {
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    effect: "fade",
    loop: true,
    allowTouchMove: false,
});

const bestSwiper = new Swiper(".best-slider", {
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    slidesPerView: 1.4,
    loop: true,
    navigation: {
        nextEl: ".best-slider .swiper-button-next",
        prevEl: ".best-slider .swiper-button-prev",
    },
    on: {
        slideChangeTransitionEnd: function () {
            const realIndex = bestSwiper.realIndex;
            bestTxtSwiper.slideTo(realIndex);
        }
    }
});

swiper가 loop를 true로 실행할 경우와 false로 실행할경우 인덱스 값을 받는게 다른데

loop: true인 경우엔 realIndex

loop: false인 경우에 activeIndex 를 사용합니다.

 

slideTo()

- 웹 페이지에서 슬라이드를 특정 인덱스로 이동시키는 메서드

- slideTo 메서드는 Swiper 객체의 메서드로, 슬라이드를 특정 인덱스로 이동

 - 인덱스는 슬라이드의 순서를 나타내며, 0부터 시작.

  첫 번째 슬라이드는 0, 두 번째 슬라이드는 1, 세 번째 슬라이드는 2와 같은 식으로 인덱스를 할당

 

 

swiper.slideTo(index, speed, runCallbacks)

 - index: 이동할 슬라이드의 인덱스 (필수)
 - speed: 슬라이드 이동에 걸리는 시간, 기본값은 300밀리초 (선택사항)
 - runCallbacks: 슬라이드 이동 후 콜백 함수를 실행할지 여부를 나타내는 값, 기본값은 true (선택사항)

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

---

 

문제가 생겨 다시 포스팅을 수정해봅니다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

콘솔창을 보니

서로 다른 realIndex

'bestTxtSwiper의 realIndex 값이 루프가 반복될 때마다 증가하는 현상이 일어났고

이를 보완하기 위해 코드를 다시 짜봅니다.

on: {
    slideChangeTransitionStart: function () {
        const realIndex = bestSwiper.realIndex;
        let targetIndex = realIndex;

        bestTxtSwiper.slideTo(targetIndex);
        bestTxtSwiper.update(); // swiper업데이트 
    },
    slideNextTransitionStart: function () {
        bestTxtSwiper.autoplay.stop(); // 
    },
    slidePrevTransitionStart: function () {
        bestTxtSwiper.autoplay.stop(); // 
    },
    slideChangeTransitionEnd: function () {
        bestTxtSwiper.autoplay.start(); // 
    }
}

두슬라이더의 순서를 정확하게 맞추기 위해

bestSwiper의 슬라이드 이동 전후에 bestTxtSwiper의 자동재생을 제어하였고

slideNextTransitionStart 및 slidePrevTransitionStart 이벤트에서는 자동재생을 멈추고,

slideChangeTransitionEnd 이벤트에서는 자동재생을 다시 시작하였였습니다.

마지막으로 bestTxtSwiper.update()를 호출하여 bestTxtSwiper를 업데이트합니다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.