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 (선택사항)

 

---

 

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

 

swiper realIndex 루프가 반복될때마다 달라지는 문제

콘솔창을 보니

서로 다른 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를 업데이트합니다.

 

realIndex 해결결과