我看不到按钮导航和分页分数。

Question

我试图在我的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>

你能帮助我吗？

Answer 1

好吧，我找到了解决方案。我只是在我的swiper和我的html中用swiper-pagination-hom替换了swiper-pagination-hom，一切都很好。