使用Swiper自定义分页样式

 1. html部分

<div>
   <div class="itemswiper">
      <div class="swiper-container" id="headswiperbar">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./sw1.png" alt="" />
            </div>
          </div>
        </div>
      </div>
   </div>
   <div class="auto">
     <div class="swiper-pagination">
   </div>
</div>

 2. js部分

      let swlist =[{
        img:"./resource/img/newimages/new/",
        aimg:"./resource/img/newimages/new/",
        tit:"一站式辅助",
        text:"资源种类覆盖"
      }]
      var headswiperbar = new Swiper("#headswiperbar", {
        //spaceBetween: 25,
        slidesPerView: 1,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return `
              <div class="switem ${className}">
                <div class="flex flex-align-center">
                  <div class="swimg">
                    <img src="./${index}.png" alt="" />
                  </div>
                  <h6>${swlist[index].tit}</h6>
                </div>
                <span>${swlist[index].text}</span>
              </div>
              `;
          },
        },
      });