轮播图

<link rel="stylesheet" href="/utils/lib/swiper-11.0.5/package/swiper-bundle.min.css">

<script src="/utils/lib/swiper-11.0.5/package/swiper-bundle.min.js"></script>

<div class="team-swiper swiper">
  <div class="swiper-wrapper">
    <div class="team-card swiper-slide">Slide 1</div>
    <div class="team-card swiper-slide">Slide 2</div>
    <div class="team-card swiper-slide">Slide 3</div>
    ...
  </div>

  <div class="swiper-pagination"></div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <div class="swiper-scrollbar"></div>
</div>

<div class="promotion-swiper swiper">
  <ul class="swiper-wrapper">
    <li class="promotion-card swiper-slide">Slide 1</li>
    <li class="promotion-card swiper-slide">Slide 2</li>
    <li class="promotion-card swiper-slide">Slide 3</li>
    ...
  </ul>

  <div class="swiper-pagination"></div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <div class="swiper-scrollbar"></div>
</div>

.swiper {
  width: 100%;
  max-width: 800px;
}

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,
  clickable:true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

const teamSwiper = new Swiper('.team-swiper', {}); 

const swiper = new Swiper('.swiper', {
  // 各配置项
});      

swiper.autoplay

swiper.init()

.swiper .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  background-color: #fff;
}

.swiper .swiper-pagination-bullet-active {
  background-color: #f40;
}

或

.swiper-pagination-bullet {
  background-color: transparent;
  width: 40px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 4px;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #f40;
}

--swiper-navigation-size: 36px;
--swiper-navigation-color: #fff;      

let swiper = new Swiper('.header-swiper', {
  //... ...
  slidesPerView: 1,
  spaceBetween: 10,
  breakpoints: {
    768: {
      slidesPerView: 2,
      spaceBetween: 15
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 20
    },
  }
});      

const swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: true,
  speed: 1200,
  effect: 'fade',
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return '' + String(index + 1).padStart(2, '0') + '';
    }
  }
});

.swiper {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 4/3;
}

.swiper-slide {
  position: relative;
}

.swiper-slide img {
  position: absolute;
  transform: translateX(50%);
  width: 100%;
  opacity: 0;
  transition: 0.4s;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 20px;
  display: flex;
  justify-content: center;
}

.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 20px;
  padding: 4px 10px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: none;
  opacity: 1;
  align-content: center;
  font-size: 12px;
  color: #000;
  margin: 0;
  border: 1px solid transparent;
}

.swiper-pagination-bullets .swiper-pagination-bullet-active {
  border-color: #000;
}

.swiper-slide-active img {
  transform: translateX(0);
  opacity: 1;
}

function formatFraction(currentIndex, totalSlides) {
  const formattedCurrent = String(currentIndex).padStart(2, "0");
  const formattedTotal = String(totalSlides).padStart(2, "0");
  return `<span class="swiper-pagination-current">${formattedCurrent}</span>/<span class="swiper-pagination-total">${formattedTotal}</span>`;
}

const swiper = new Swiper(".swiper", {
  loop: true,
  autoplay: true,
  speed: 1200,
  effect: "fade",
  pagination: {
    el: ".swiper-pagination",
    type: "custom", // 使用自定义分页器类型
    renderCustom: function (swiper, current, total) {
      return formatFraction(current, total); // 直接引用formatFraction函数
    },
  },
  on: {
    init: function () {
      // 初始化时更新分页器文本
      this.pagination.renderedFraction = formatFraction(
        this.activeIndex + 1,
        this.slides.length
      );
    },
    slideChange: function () {
      // 每当幻灯片变化时更新分页器文本
      this.pagination.renderedFraction = formatFraction(
        this.activeIndex + 1,
        this.slides.length
      );
    },
  },
});

const swiperInfo = document.querySelectorAll('.swiper-info')

const swiper = new Swiper('.swiper', {
  // ...
});

swiper.on('slideChange', function () {
  console.log('slide changed');
  anime({
    targets: swiperInfo[swiper.realIndex].children,
    opacity: [0, 1],
    duration: 400,
    easing: "linear",
    delay: anime.stagger(400, { start: 300 }),
    translateY: [anime.stagger(40, 10), 0],
  })
});