swiper (幻燈片) 學習心得

左右箭頭自定義且不要重疊

html

<swiper :modules="modules" slides-per-view="auto" :navigation="{ nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',}">

        <div class="swiper-button-next"><i class="bi bi-caret-right-fill" style="font-size:1.5em"></i></div>

        <div class="swiper-button-prev"><i class="bi bi-caret-left-fill" style="font-size:1.5em"></i></div>

css

<style>

    .swiper-button-prev:after, .swiper-button-next:after {

        content: '';

    }

    .swiper {

        padding: 0 1.75em;

    }

    .swiper-button-next {

        right: 0

    }

    .swiper-button-prev {

        left: 0

    }

    .swiper-button-next, .swiper-button-prev {

        background-color:white;

        top:0;

        margin-top:unset;

        height:100%;

    }

</style>

官網