업무로 막힌 곳의 비망록

참고원

htps : // 갈리리코로. 코 m/스페 r/
htps //w w. 요츠베. 이 m/와 tch? v = n cdYgbgvq4k

비망록

Swiper.js에서는 일반적으로 슬라이드를 움직이는 화살표 버튼이 Swiper 요소 내부에 있습니다.
구현하고 있던 WEB 페이지의 사양상, 이 화살표를 Swiper 요소의 바깥쪽에 낼 필요가 있었다.

방법

1. 기본 요소

Swiper.js의 기본 요소에 이전 화살표와 다음 화살표 버튼을 붙인 것
(swiper-button-prev, swiper-button-next)

Swiper.html

<!-- Swiper START -->
<div class="swiper-container">
    <!-- メイン表示部分 -->
    <div class="swiper-wrapper">
        <!-- 各スライド -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->

2. 전체를 div 태그로 둘러싼다(클래스명은 임의)

Swiper.html

<div class='swiper-wrap'>
    <!-- Swiper START -->
<div class="swiper-container">
    <!-- メイン表示部分 -->
    <div class="swiper-wrapper">
        <!-- 各スライド -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->
</div>

3. 버튼 요소 (swiper-button-prev 및 swiper-button-next)를 swiper-container의 형제 요소로 만듭니다.

버튼 요소(swiper-button-prev 와 swiper-button-next)를 클래스명 swiper-container라는 div 태그의 형제 요소로 하고 싶기 때문에, 버튼 요소를 같은 계층에 가져옵니다. (하나 밖에 내 준다.)

Swiper.html

<div class='swiper-wrap'>
    <!-- Swiper START -->
<div class="swiper-container">
    <!-- メイン表示部分 -->
    <div class="swiper-wrapper">
        <!-- 各スライド -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
    </div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Swiper END -->
</div>

4.Swiper-wrap에 대해 position relative 지정

CSS에서 최상위로 지정한 Swiper-wrap에 대해 position relative를 지정, 이유로서는 자식 요소인 버튼 요소에는 position absolute가 디폴트로 지정되어 있다.
(요소의 위치를 ​​절대치로 ​​지정하는 방법) position 에 대해서는 여기
따라서 버튼의 위치 조정도 스타일에 position absolute 를 지정해 top 이나 left 로 조정.

5. 화살표 버튼이 슬라이더 밖으로 나오면 OK

위의 position relative 와 position absolute 를 사용해 화살표 버튼이 슬라이더 밖으로 나오면 OK