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>

官網

開發環境網站遇到 SSL 憑證無效

錯誤訊息: AuthenticationException: The remote certificate is invalid because of errors in the certificate chain: NotTimeValid

確認是否 localhost 憑證有效 : 設定 > 網際網路選項 > 內容 > 憑證，或直接點擊網址列左側不安全文字查看憑證

解法1: 

刪除 c:\Users\[username]\AppData\Roaming\ASP.NET\https\ 裡面所有檔案，然後重啟專案，若有配合 vue 則連同 vue 的 npm 一起重啟，此時檔案會重新產生

解法2:

於 visual studio 中開啟套件管理主控台並輸入下面指令

dotnet dev-certs https --clean
dotnet dev-certs https --trust