swiper 슬라이드 가운데 정렬

swiper 슬라이드 가운데 정렬

QA

swiper 슬라이드 가운데 정렬

본문

3554271915_1668074601.3716.png

이런 슬라이드 형태를 구현하고자 하는데요


var edtSldCnt = new Swiper(".edtSldCnt", {
                    slidesPerView : 'auto',
                    slideToClickedSlide : true,
                    centeredSlides : true,
                    allowTouchMove : true,
                    loop: true,
                    navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                    },
                });

 

현재 스크립트 코드는 이렇고 active된 슬라이드와의 간격을 css로 컨트롤 하고 있습니다.

그런데 문제는 처음엔 중앙정렬로 잘 노출되다가

슬라이드를 하나 넘기면 위치가 이상해집니다 (중앙정렬이 안맞음)

어떻게 해결하면 될까요..?

이 질문에 댓글 쓰기 :

답변 2

올리신 코드만 가지고 재구성 해봤을때 그런문제는 없었습니다.


<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.swiper {
    background-color: #eee;
}
.swiper-carousel-animate-opacity {
    text-align: center;
}
.swiper-carousel-animate-opacity img {
    width: 50%;
    margin: auto;
    border-radius: 1em;
}
.slide-content {
    text-align: center;
}
</style>
<div class="swiper">
    <a class="swiper-button-prev"></a>
    <a class="swiper-button-next"></a>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-carousel-animate-opacity">
                <img src="https://carousel-slider.uiinitiative.com/images/guardians-of-the-galaxy.jpg" />
            </div>
            <div class="slide-content">
                <h2>123</h2>
                <p>123123</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-carousel-animate-opacity">
                <img src="https://carousel-slider.uiinitiative.com/images/justice-league.jpg" />
            </div>
            <div class="slide-content">
                <h2>456</h2>
                <p>456456</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-carousel-animate-opacity">
                <img src="https://carousel-slider.uiinitiative.com/images/spider-man.jpg" />
            </div>
            <div class="slide-content">
                <h2>789</h2>
                <p>789789</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-carousel-animate-opacity">
                <img src="https://carousel-slider.uiinitiative.com/images/suicide-squad.jpg" />
            </div>
            <div class="slide-content">
                <h2>abc</h2>
                <p>abcabc</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-carousel-animate-opacity">
                <img src="https://carousel-slider.uiinitiative.com/images/thor-ragnarok.jpg" />
            </div>
            <div class="slide-content">
                <h2>def</h2>
                <p>defdef</p>
            </div>
        </div>
    </div>
</div>
<script>
var edtSldCnt = new Swiper(".swiper", {
                    slidesPerView : 'auto',
                    slideToClickedSlide : true,
                    centeredSlides : true,
                    allowTouchMove : true,
                    loop: true,
                    navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                    },
                });
</script>

중앙 정렬이 안맞는 슬라이드와 정렬이 맞는 슬라이드 2개를 띄어놓고 css에서 둘의 차이점이 뭐가 있는지 보면 원인 추적이 됩니다

슬라이드 될 때 transform 픽셀 값이 다릅니다
이는 active될 때의 이미지 크기를 scale로 조절하여 더 크게 설정했기 때문에 돌아가는 값이 다른 것 같은데요.,,,,,,,슬라이드 할때마다 중앙에 맞추고 싶은데 어떻게 컨트롤 해야 할지 모르겠습니다 ㅠㅠ

그럼 active된 이미지가 사라질 때 다시 축소를 시키나요?
swiper 의 slideChange 이벤트 같은 걸로 패널을 이동할 때 active 패널의 이미지 크기를 다시 원래대로 돌려준다던가 하는 걸 해보세요

아래처럼 사용 가능합니다.
var swiper = new Swiper(".swiper", {

    loop: true,
    navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",

    }, on: {
        slideChange: function () {
            // 슬라이드 바뀌면 이벤트 발동
        }
    }
});

아마 패널 크기에 따라 자동으로 조절해주게 되어있을 거라서..
슬라이드 변경 발동 전에 먼저 이미지를 축소 시켜주던가 아니면 변경 후에 축소해도 될지 직접 해보셔야 할 겁니다

https://swiperjs.com/swiper-api#events
위 주소에서 swiper에 추가할 수 있는 이벤트 있으니 이것저것 다 써보세요

답변을 작성하시기 전에 로그인 해주세요.
전체 301
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT