swiper を使用して vue3 のページネーションをカスタマイズする

導入

カルーセルの効果を実現するために使用されます。デフォルトvue3 では小さな点の形で表示されますが、多くの場合カスタム ページャーが使用され、構成のために組み込みパラメータを変更する必要があります。たとえば、以下に示すように、時間軸を実装することにより、ポケットベルを特定の時間にカスタマイズする必要があります。 swiper分页器
swiper

コード

 import {
    
     Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css/pagination' 
 import {
    
    Pagination} from 'swiper'
  const pagination = ref({
    
    
    el: ".swiper-pagination",
    clickable: true,
    type: 'custom',
      renderCustom:function(swiper,current,total){
    
    
      var paginationHtml = '';
      var text = ['2014','2015','2016','2017','2018','2019'];
      for(var i=1;i<=total;i++){
    
    
        if(i==current){
    
    
          paginationHtml+=` <span class='pagination_text swiper-pagination-bullet swiper-pagination-bullet-active'>${
      
      text[i-1]}</span>`
        }else{
    
    
          paginationHtml+=`<span class='pagination_text swiper-pagination-bullet'>${
      
      text[i-1]}</span>`
        }
      };
      return paginationHtml
    }
  })