zebra-swiper使用div

Zebra Swiper是一个基于纯CSS实现的轮播插件，它利用了CSS的伪元素和动画技术来创建出类似斑马条纹的视觉效果。当你使用Zebra Swiper处理`<div>`元素时，首先需要在HTML中创建一系列`<div>`，每个`<div>`代表一个轮播项。例如：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <!-- 更多的滑动项... -->
  </div>
  <div class="swiper-pagination"></div> <!-- 可选：添加分页指示器 -->
</div>

然后，在CSS中配置Zebra Swiper的相关样式和动画规则。你需要引入Swiper CSS文件，并设置`.swiper-container`、`.swiper-slide`等类的选择器。通过JavaScript初始化插件，传递必要的选项给它，如自动播放、循环、导航等。

import 'zebra-swp/dist/zebra.swp.min.css'; // 引入CSS

let swiper = new Zebra.Swiper('.swiper-container', {
  direction: 'horizontal',
  loop: true,
  pagination: {
    el: '.swiper-pagination'
  }
});