I can't see button navigation and pagination fraction

I try to add navigation button and pagination fraction on my swiper.js I can see navigation element and button element in html code. I can see my swiper which is displayed but buttons and pagination are not displayed.

Here is my code

    <!-- 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>

Can you help me please ?

1 answer

  • answered 2020-06-05 19:53 iouston

    Ok, i found the solution. I just replaced swiper-pagination-hom by swiper-pagination in my swiper and in my html and all is good. the same for buttons... strange but ok