swiper 슬라이드 가운데 정렬
본문
이런 슬라이드 형태를 구현하고자 하는데요
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에 추가할 수 있는 이벤트 있으니 이것저것 다 써보세요
