swiper 화살표 질문

swiper 화살표 질문

QA

swiper 화살표 질문

본문

안녕하세요, 홈페이지에 swiper로 슬라이드를 구현중입니다.

2039256392_1607443414.2616.jpg

현재 슬라이드는 위에 첨부한 이미지처럼 되어있는 상황입니다. 

원하는 것은 화살표가 저 마진 범위까지 나갔으면 합니다.

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>

이 요소를 원하는곳에 배치하면 됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 93
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT