swiperのswiper-buttonについて

swiperで画像通りのことをしたいのですが、cssやjsでどこを修正すればいいのかわかりません。

<div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="images/facility_img01.png" alt=""></div>
                <div class="swiper-slide"><img src="images/facility_img02.png" alt=""></div>
                <div class="swiper-slide"><img src="images/facility_img03.png" alt=""></div>
            </div>
        <!-- If we need pagination 
        <div class="swiper-pagination"></div>-->
        
        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    .swiper-container{
        text-align: center;
    }

    .swiper-container .swiper-slide img{
    width: 100%;
    max-width:420px;
    height: auto;
    }
    .prettyprint{
        border: none;
        background: #fafafa;
        color: #697d86;
    }

    .swiper-button-prev {
        background-image: url("../images/arrow01.png") !important;
    }
    .swiper-button-next {
        background-image: url("../images/arrow02.png") !important;
    }

    .button-prev02{
    margin-top:0;
}

行動規範の内容に同意します

回答1件

ベストアンサー

.swiper-container は overflow:hidden となっているので外には出せません。
そこでHTMLを変更してswiper-container-wrapperを用意し

HTML
1<div class="swiper-container-wrapper">
2    <div class="swiper-container">
3        <!-- Additional required wrapper -->
4        <div class="swiper-wrapper">
5            <!-- Slides 略 -->
6        </div>
7    </div>
8    <div class="swiper-button-prev"></div>
9    <div class="swiper-button-next"></div>
10</div>

.swiper-container が width:420px の場合

CSS
1.swiper-container-wrapper {
2  position: relative;
3}
4
5.swiper-button-prev {
6  left: calc((100vw - 420px) / 2 - 40px);
7}
8
9.swiper-button-next {
10  right: calc((100vw - 420px) / 2 - 40px);
11}