时间戳

首页 > 解决方案 > Swiper 自定义分页

javascript - Swiper 自定义分页

问题描述

我正在尝试创建类似于 www.dreamperfectregime.com 上的分页和滑块

它需要是垂直的，并且鼠标也可以滚动。

目前，滑块可以工作，但根本没有分页。

我需要帮助来显示分页并对其进行定制。

HTML

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/style.css">


</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-name="Item 1">Luke Sciberras</div>
        <div class="swiper-slide" data-name="Item 2">About</div>
        <div class="swiper-slide" data-name="Item 3">Portfolio</div>
        <div class="swiper-slide" data-name="Item 4">Contact Me</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination1"></div>
</div>

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
var names = [];
$(".swiper-wrapper .swiper-slide").each(function(i) {
names.push($(this).data("name"));
});


var swiper = new Swiper('.swiper-container', {
        pagination: {
    el: '.swiper-pagination1',
    type: 'custom',
renderCustom: function(swiper, current, total) {
    var text = "<span class='pContainer' style='background-color:transperent;text-align: center;width:100%; display:block'>";
    for (let i = 1; i <= total; i++) {
            //alert(total);
        if (current == i) {

            text += "<span style='display:inline-block;border-top:3px solid #afd869;text-align:left;margin-right:4px;width: 20%;color:#afd869;padding:5px;'>" + names[i-1] + "</span>";

        } 

        else {

            text += "<span style='display:inline-block;border-top:3px solid white;text-align:left; margin-right:4px;width: 20%;color:white;padding:5px;'>" + names[i] + "</span>";
        }
    }
    text += "</span>";
    return text;
}
},
    direction: 'vertical',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    mousewheelControl: true
});
</script>
</body>
</html>

标签： javascriptjqueryhtmlcssswiper

解决方案

推荐阅读