使用swiper制作轮播类型的button按钮组

效果截图：

最终要实现的功能是，每个按钮标识一个房间名字，点击某一个按钮 自动定位到所选房间。
选用swiper主要是因为简单，而且支持手势拖动

需要引入的资源：

<link href="/assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
<script src="/assets/plugins/swiper/swiper-bundle.min.js"></script>

去swiper官网下载即可

CSS：

	<style type="text/css">
        html,
        body {
            position: relative;
            height: 100%;
        }
       
        /*轮播按钮属性*/
        .swiper-container {
            width: 70%;
            height: 15%;
            top:75%;
            margin-left: auto;
            margin-right: auto;
            z-index: 9999;
        }

        .swiper-slide{
            text-align: center;
            font-size: 18px;
            background: white;
            /*color: white;*/
            height: calc((100% - 50px) / 2);

            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

HTML：

<#--地图下方的轮播按钮-->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <button class="swiper-slide" onclick="findPoint(this)" value="76635" type="submit">按钮1</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮2</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮3</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮4</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮5</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮6</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮7</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮8</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮9</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮10</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮11</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮12</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮13</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮14</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮15</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮16</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮17</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮18</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮19</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮21</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮22</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮23</button>
        <button class="swiper-slide" onclick="findPoint(this)" type="submit">按钮24</button>
    </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,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });


	/*按钮的点击事件*/
    function findPoint(obj){
        console.log($(obj).prop("value"))
    }

我是用这个点击事件是因为方便传递所点击的button的元素
也可以使用jQuery的name选择器：

	$("button[name='name']").click(function () {
        
    })