swiper调整左右滑动按钮的位置

swiper本来的左右滑动按钮是跟slide重合的。
先看一下最终效果：

说一下大概的思路。
就是在swiper容器的最外层再加一层div 然后把左右滑动的按钮放在跟swiper平级。

代码：
css:

		.swiper-father {
            width: 80%;
            height: 15%;
            top:75%;
            margin-left: auto;
            margin-right: auto;
            z-index: 9999;
            position: relative;
        }

        /*轮播按钮属性*/
        .swiper-container {
            width: 90%;
            height: 100%;
            z-index: 9999;
        }

        .swiper-slide{
            text-align: center;
            font-size: 18px;
            /*设置背景图片 及自适应*/
            background: url("/assets/images/buttonStyle.jpg") no-repeat;
            border-style: none;
            background-size:cover;
            -webkit-background-size:cover;
            -o-background-size:cover;
            background-position:center;

            height: calc((100% - 50px) / 2);
            display: flex;
            justify-content: center;
            align-items: center;
        }

这里宽度自己设置，不能设置100% 是为了给滑动按钮留出空间

html:

<#--地图下方的轮播按钮-->
<div class="swiper-father">
    <div class="swiper-container">
        <div class="swiper-wrapper" id="btnCon">
            <#list roomList as room>
                <button class="swiper-slide" onclick="findPoint(this)" value="${room.mapId}" type="submit">${room.roomName}</button>
            </#list>
        </div>
    </div>
    <!-- 轮播按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

js:

    /*初始化轮播按钮*/
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 4,   //一行显示四个
        slidesPerColumn: 2, //显示两行
        spaceBetween: 30,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });