swiper 화살표 질문
본문
안녕하세요, 홈페이지에 swiper로 슬라이드를 구현중입니다.
현재 슬라이드는 위에 첨부한 이미지처럼 되어있는 상황입니다.
원하는 것은 화살표가 저 마진 범위까지 나갔으면 합니다.
swiper-container 클래스 밖에 화살표 클래스를 넣으면 어거지로 되긴 하지만
반응형에서 계속 틀어지는 상황입니다.
swiper-container 클래스 안에서 화살표 z-index를 최대로 높혀도
container 범위 밖까지 늘리면 사라지네요..
혹시 비슷한 작업 해보신 분이나 방법을 아시는 분이 있다면 조언 부탁드립니다ㅠㅠ
답변 1
지금 슬라이드 상위에 부모 div 를 하나 더 만든 후 현재 슬라이드를 감싸고요.
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
좌/우 화살표 호출 div 를 상위 부모 div 속에 슬라이드와 같이 형제로 만들면 됩니다.
말로는 좀 어렵네요 ㅋㅋ
<div class="parent"> - 부모 div
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
결론은
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
이 요소를 원하는곳에 배치하면 됩니다.
