swiper-prev를 index맨 끝으로 보낼순 없나요?
본문
swiper-slide를 아래 그림중 3.원하는 모양 처럼, 영역 내에서 순환하게 만들고싶습니다.
next버튼을 누르면 active에 있던게 prev로 가서.. 맨 끝 영역이 비어있게 되는데요..
영역 내에서 순환하도록 어떻게 해야할지 모르겠어요.. ㅠㅠ
맨 아래는 현재 js에 있는 swiper코드입니다.
https://www.kipa.re.kr/site/kipa/main.do
이 사이트의 '최근간행물'부분처럼 하고싶습니다
---------------------------
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
{
watchSlidesProgress: true,
loopedSlides: 3, // slidesPerView와 같은 값 설정
observer: true,
observeParents: true
}
만약 스와이퍼 버전이 최신 버전이면 루프 슬라이드 속성이 바꼈습니다.
loopAdditionalSlides: 3
답변 감사합니다!!! 추가해서 넣었는데 변화는 없어욤.. 여전히 slide-prev가 active앞으로 나타는데 음.. on : 이걸루 커스텀 해야하는걸까요..!
slidesPerView: 5, 값을 좀 더 높혀 보세요
ㅠㅠ그대로예욤.. on: 으로 추가 자바스크립트 안넣어도, 속성값으로 변경할 수 있나보군요..!
사용한 코드를 다 올려보시거나 / 주소를 공유 해주셔야 알 수 있을 것 같네요
이거 해보세요 안되요 저거 해보세요 안되요 왜 ? 안되죠..라는 질문과 답변 뿐이네요
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 슬라이드를 흐리게 처리
}
});
},
},
});
원하는 스타일을 완성하시길 바랍니다.
요거는 prev에 스타일 입히는거죠? 고거는 css로 처리해서 눈에 안보이게는 했는데. prev영역이 있다보니, 그림에서 표현했던 빈 공간이 계속 생기더라구요
prev 슬라이드가 공간을 차지하지 않도록 display: none;을 적용하거나,
슬라이드 컨테이너의 overflow: hidden; 속성을 추가로 적용
.swiper-slide-prev {
display: none;
}
.swiper-wrapper {
overflow: hidden;
}
slidesPerView와 slidesOffsetBefore, slidesOffsetAfter 값을 확인.
필요 시 적절히 값을 조정해 빈 공간을 최소화
var swiper1 = new Swiper(".mySwiper1", {
slidesPerView: 5,
loop: true,
slidesOffsetBefore: 0,
slidesOffsetAfter: 0, // 빈 공간 생기는 문제 방지
loopAdditionalSlides: 5, // slidesPerView와 동일
});
빈 공간이 생기는 경우, on 이벤트에서 swiper-wrapper의 위치를 직접 조정할 수 있음
on: {
slideChangeTransitionEnd: function () {
const wrapper = document.querySelector('.swiper-wrapper');
wrapper.style.transform = 'translate3d(0, 0, 0)';
},
}
위 방법들을 하나씩 적용해보시고, 문제가 해결되지 않으면
사용 중인 Swiper.js 버전과 DOM 구조를 다시 체크하여 보세요.
.swiper-wrapper 위치는 일부러 고정시켜놨구.. 그 안에서 slide들이 공백이 생기지 않게 하려는거거든요..
근데 next버튼을 누르면 왼쪽으로 밀리면서, prev가 생기면서 slide하나가 영역을 삐져나가게 되고, 맨 끝에있던 slide영역은 왼쪽으로 밀리면서 비어있게 되어요..
on안에서 뭔가 커스텀 해야할 것 같아요 힌트 감사합니다 ㅎㅎ
~/_