分页项目符号上的数字

Question

我在这里遇到了一个线程，它显示了我正在尝试做的事情，但我不知道如何将其实现到我正在开发的现有网站中。这是一个 HTML/JS/CSS 网站，我按照我想要的方式设置了滑动幻灯片，但只想在项目符号上添加数字。 我想要实现的目标是here。

我试图将其放入的代码在这里：

html

...
<link rel="stylesheet" href="swiper/css/swiper.min.css">
...
 <div class="swiper-container">
<div class="swiper-wrapper">
    <div class='swiper-slide'><img src='images/ARCHITECTURE/01.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/02.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/03.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/04.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/05.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/06.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/07.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/08.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/09.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/10.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/11.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/12.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/13.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/14.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/15.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/16.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/17.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/18.jpg' class='respimg'></div>
    <div class='swiper-slide'><img src='images/ARCHITECTURE/19.jpg' class='respimg'></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>  
...
<script>
    selcat('ARCHITECTURE');
    $('#cARCHITECTURE').addClass('up');
    </script><script>
    $('#p4').addClass('up');
    </script>      </div>
</div>  <script src="swiper/js/swiper.min.js"></script>


<script>
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    effect: 'fade',
    keyboardControl: true,
    loop: true
});
</script>

CSS

    /* Slider */
ol.bjqs-markers li a{display:inline-block; font-family: 'Open Sans', sans-serif; font-size: 12px; letter-spacing: 8px; }
ol.bjqs-markers li.active-marker a,
ol.bjqs-markers li a:hover{ color: black; }
ul.bjqs-controls.v-centered li a{ color: black; background: grey; font-family: 'Open Sans', sans-serif; }

/* Swiper */
.swiper-container {
    max-width: 726px; margin: 0 auto;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    margin-bottom: 30px;
}
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    text-align: center;
    line-height: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: #D0D0D0;
}
.swiper-pagination-bullet-active {
    color:#fff;
    background: #000;
}

我愿意付钱给能解决这个问题的人！

Answer 1

您可能想修改新 Swiper 内的分页（...

替换这个：

pagination: '.swiper-pagination',

有了这个：

pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
    return '<div class="' + className + '">' + (index + 1) + '</div>';
    },
},

这将是您的新 JS 代码：

var swiper = new Swiper('.swiper-container', {
pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
    return '<div class="' + className + '">' + (index + 1) + '</div>';
    },
},
paginationClickable: true,
effect: 'fade',
keyboardControl: true,
loop: true
});

（索引 + 1）是项目符号中的数字标签。