swiper-prev를 index맨 끝으로 보낼순 없나요? 채택완료
swiper-slide를 아래 그림중 3.원하는 모양 처럼, 영역 내에서 순환하게 만들고싶습니다.
next버튼을 누르면 active에 있던게 prev로 가서.. 맨 끝 영역이 비어있게 되는데요..
영역 내에서 순환하도록 어떻게 해야할지 모르겠어요.. ㅠㅠ
맨 아래는 현재 js에 있는 swiper코드입니다.
https://www.kipa.re.kr/site/kipa/main.do
이 사이트의 '최근간행물'부분처럼 하고싶습니다
http://sir.kr/data/editor/2501/1025515505_1736210323.1892.png" width="100%" />
http://sir.kr/data/editor/2501/1025515505_1736210312.3082.png" width="100%" />
http://sir.kr/data/editor/2501/1025515505_1736210336.8194.png" width="100%" />
---------------------------
var swiper1 = new Swiper(".mySwiper1", {
slidesPerView: 5,
loop: true,
slidesOffsetBefore: 0,
slideActiveClass: 'swiper-slide-active',
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".btn-next-white",
prevEl: ".btn-prev-white",
},
});
답변 2개
</p>
<p>{
watchSlidesProgress: true,
loopedSlides: 3, // slidesPerView와 같은 값 설정
observer: true,
observeParents: true
}</p>
<p>
만약 스와이퍼 버전이 최신 버전이면 루프 슬라이드 속성이 바꼈습니다.
</p>
<p>loopAdditionalSlides: 3</p>
<p>답변에 대한 댓글 4개
이거 해보세요 안되요 저거 해보세요 안되요 왜 ? 안되죠..라는 질문과 답변 뿐이네요
댓글을 작성하려면 로그인이 필요합니다.
Swiper.js를 사용해 슬라이드가 순환되도록 설정하고 싶으신데,
loop 옵션과 관련된 속성만으로 원하는 동작을 구현하기 어려운 상황으로 보입니다.
특히, `swiper-slide-prev`가 `swiper-slide-active` 앞에 나타나거나
비어있는 공간이 생기는 것을 방지하시려는 것 같군요.
이 경우, Swiper.js의 loop 옵션과 on 이벤트를 활용해
슬라이드 상태를 동적으로 제어하는 방법을 추천드립니다
- - 방안 예시 - -
1. loop 및 loopAdditionalSlides 설정
- `loop: true`는 슬라이드를 순환하도록 설정하며 기본적으로 활성화 상태여야 합니다.
- 최신 Swiper.js 버전에서는
`loopAdditionalSlides`가 기본적으로 처리되거나 자동 설정될 수 있으니,
구 버전을 사용하는 경우에만 해당 속성을 적용 여부를 확인하세요.
2. on 이벤트 활용
- `on` 속성의 `slideChangeTransitionEnd` 이벤트를 활용하여
슬라이드 이동 시 `swiper-slide-prev` 상태를 추가로 제어할 수 있습니다.
- 기본적으로 Swiper.js의 loop 설정에서 자동 처리되지만,
스타일이나 동작을 커스터마이징할 경우에만 필요합니다.
※ 아래는 Swiper.js에서 슬라이드 순환을 제어하는 코드 예시입니다.
- 필요에 따라 조정하실 수 있습니다. (javascript)
var swiper1 = new Swiper(".mySwiper1", {
slidesPerView: 5,
loop: true,
slidesOffsetBefore: 0,
slideActiveClass: 'swiper-slide-active',
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".btn-next-white",
prevEl: ".btn-prev-white",
},
on: {
slideChangeTransitionEnd: function () {
const slides = document.querySelectorAll('.swiper-slide');
slides.forEach(slide => {
if (slide.classList.contains('swiper-slide-prev')) {
// 필요에 따라 클래스 추가/제거 또는 스타일 변경
slide.style.opacity = "0.5"; // 예: prev 슬라이드를 흐리게 처리
}
});
},
},
});</p>
<p>원하는 스타일을 완성하시길 바랍니다.
답변에 대한 댓글 4개
슬라이드 컨테이너의 overflow: hidden; 속성을 추가로 적용[code]
.swiper-slide-prev {
display: none;
}
.swiper-wrapper {
overflow: hidden;
}
[/code]
slidesPerView와 slidesOffsetBefore, slidesOffsetAfter 값을 확인.
필요 시 적절히 값을 조정해 빈 공간을 최소화[code]
var swiper1 = new Swiper(".mySwiper1", {
slidesPerView: 5,
loop: true,
slidesOffsetBefore: 0,
slidesOffsetAfter: 0, // 빈 공간 생기는 문제 방지
loopAdditionalSlides: 5, // slidesPerView와 동일
});
[/code]
빈 공간이 생기는 경우, on 이벤트에서 swiper-wrapper의 위치를 직접 조정할 수 있음[code]
on: {
slideChangeTransitionEnd: function () {
const wrapper = document.querySelector('.swiper-wrapper');
wrapper.style.transform = 'translate3d(0, 0, 0)';
},
}
[/code]
위 방법들을 하나씩 적용해보시고, 문제가 해결되지 않으면
사용 중인 Swiper.js 버전과 DOM 구조를 다시 체크하여 보세요.
근데 next버튼을 누르면 왼쪽으로 밀리면서, prev가 생기면서 slide하나가 영역을 삐져나가게 되고, 맨 끝에있던 slide영역은 왼쪽으로 밀리면서 비어있게 되어요..
on안에서 뭔가 커스텀 해야할 것 같아요 힌트 감사합니다 ㅎㅎ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인