swiper 슬라이드 가운데 정렬 채택완료
이런 슬라이드 형태를 구현하고자 하는데요
</p>
<p>var edtSldCnt = new Swiper(".edtSldCnt", {</p>
<p> slidesPerView : 'auto',</p>
<p> slideToClickedSlide : true,</p>
<p> centeredSlides : true,</p>
<p> allowTouchMove : true,</p>
<p> loop: true,</p>
<p> navigation: {</p>
<p> nextEl: ".swiper-button-next",</p>
<p> prevEl: ".swiper-button-prev",</p>
<p> },</p>
<p> });</p>
<p>
현재 스크립트 코드는 이렇고 active된 슬라이드와의 간격을 css로 컨트롤 하고 있습니다.
그런데 문제는 처음엔 중앙정렬로 잘 노출되다가
슬라이드를 하나 넘기면 위치가 이상해집니다 (중앙정렬이 안맞음)
어떻게 해결하면 될까요..?
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
3년 전
올리신 코드만 가지고 재구성 해봤을때 그런문제는 없었습니다.
</p>
<p><link
rel="stylesheet"
href="<a href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"</a>
/></p>
<p><script src="<a href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script></a></p>
<p><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="<a href="https://carousel-slider.uiinitiative.com/images/guardians-of-the-galaxy.jpg"" target="_blank" rel="noopener noreferrer">https://carousel-slider.uiinitiative.com/images/guardians-of-the-galaxy.jpg"</a> />
</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="<a href="https://carousel-slider.uiinitiative.com/images/justice-league.jpg"" target="_blank" rel="noopener noreferrer">https://carousel-slider.uiinitiative.com/images/justice-league.jpg"</a> />
</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="<a href="https://carousel-slider.uiinitiative.com/images/spider-man.jpg"" target="_blank" rel="noopener noreferrer">https://carousel-slider.uiinitiative.com/images/spider-man.jpg"</a> />
</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="<a href="https://carousel-slider.uiinitiative.com/images/suicide-squad.jpg"" target="_blank" rel="noopener noreferrer">https://carousel-slider.uiinitiative.com/images/suicide-squad.jpg"</a> />
</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="<a href="https://carousel-slider.uiinitiative.com/images/thor-ragnarok.jpg"" target="_blank" rel="noopener noreferrer">https://carousel-slider.uiinitiative.com/images/thor-ragnarok.jpg"</a> />
</div>
<div class="slide-content">
<h2>def</h2>
<p>defdef</p>
</div>
</div>
</div>
</div></p>
<p><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></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
eaglehorn
3년 전
중앙 정렬이 안맞는 슬라이드와 정렬이 맞는 슬라이드 2개를 띄어놓고 css에서 둘의 차이점이 뭐가 있는지 보면 원인 추적이 됩니다
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
뚠뚠한빼빼로
3년 전
e
eaglehorn
3년 전
그럼 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에 추가할 수 있는 이벤트 있으니 이것저것 다 써보세요
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에 추가할 수 있는 이벤트 있으니 이것저것 다 써보세요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택
이는 active될 때의 이미지 크기를 scale로 조절하여 더 크게 설정했기 때문에 돌아가는 값이 다른 것 같은데요.,,,,,,,슬라이드 할때마다 중앙에 맞추고 싶은데 어떻게 컨트롤 해야 할지 모르겠습니다 ㅠㅠ