0

我尝试在我的 swiper.js 上添加导航按钮和分页分数，我可以在 html 代码中看到导航元素和按钮元素。我可以看到我的 swiper 已显示，但未显示按钮和分页。

这是我的代码

    <!-- Slider main container -->
<div class="swiper-container swiperhome">

    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">

        <!-- Slides -->
        <div class="swiper-slide" style="background-image:url(http://www.mylink.com/fete_test.jpg)">
        <div class="slide-card">
            <h3 id="fete-des-fruits">Fete des fruits</h3>
            <p>texte qui remonte</p>
            <a href="www.mylink.com/" class="en_savoir_plus">En savoir plus</a>
            <a href="www.mylink.com/" class="toutes_actus">Toutes les actualités</a>
        </div>
        </div>

        <div class="swiper-slide" style="background-image:url(http://www.mylink.com/fete_test2.jpg)">
        <div class="slide-card">
            <h3 id="autre-manifestation">Autre manifestation</h3>
            <p>Autre texte qui remonte</p>
            <a href="" class="en_savoir_plus">En savoir plus</a>
            <a href="http://www.mylink.com/" class="toutes_actus">Toutes les actualités</a>
        </div>
        </div>

    </div>

    <!-- pagination -->
    <div class="swiper-pagination-home">Pagination</div>

    <!-- navigation buttons -->
    <div class="swiper-home-button-prev">Précednt</div>
    <div class="swiper-home-button-next">Suivant</div>

</div>

<script>   
var swiper = new Swiper('.swiper-container', 
{   observer: true,   
    observeParents: true,     
    grabCursor: true,     
    keyboard: {enabled: true,},       
    pagination: {el: '.swiper-pagination-home',
                type: 'fraction',
                },     
    navigation: {nextEl: '.swiper-home-button-next',       
                prevEl: '.swiper-home-button-prev',
                },   
    a11y: {     prevSlideMessage: 'Diapo précédente',   
            nextSlideMessage: 'Diapo suivante',   
            firstSlideMessage: 'Première diapo',   
            lastSlideMessage: 'Dernière diapo',     
},   
});
</script>
</div></div>

你能帮我吗 ？

4

1 回答 1

0

好的，我找到了解决方案。我刚刚在我的 swiper 和我的 html 中用 swiper-pagination 替换了 swiper-pagination-hom，一切都很好。按钮也一样...奇怪但还可以

于 2020-06-05T19:53:07.047 回答