swiper基本使用

html

      <div class="news_foot">
        <div class="foot-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./news_foot.png" alt=""></div>
            <div class="swiper-slide"><img src="./news_foot.png" alt=""></div>
            <div class="swiper-slide"><img src="./news_foot.png" alt=""></div>
          </div>
          <!-- 底部分页器 -->
          <div class="swiper-pagination"></div>
          
         <div class="swiper-button-prev"></div>
          <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    		<div class="swiper-button-next"></div>
          <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
        </div>
      </div>
    </div>

CSS

  .news_foot {
    margin-top: 30px;
    position: relative;

    .foot-container {
      width: 1340px;
      height: 130px;
      overflow: hidden;

      .swiper-wrapper {
        display: flex;
      }
      
       /* 其他样式的小圆点未选中时的样式 */ 
      .swiper-pagination-bullet {
   		  margin: 0 4px;
    		width: 10px;
    		height: 20px;
			}

       /* 其他样式的小圆点选中时的样式 */ 
      .swiper-pagination-bullet-active {
        opacity: 1;
        background-color: red;
      }
      
      /*自定义分页器的样式，这个你自己想要什么样子自己写*/
      .swiper-pagination-customs {
        float: right;

        width: 16px;
        height: 6px;
        background-color: #ffffff;
        opacity: 0.5;
        margin: 0 5px;
      }

      /*自定义分页器激活时的样式表现*/
      .swiper-pagination-customs-active {
        opacity: 1;
        background-color: #0b464e;
      }

    }

  }

JS

 	const swiper = new Swiper('.foot-container', {
      pagination: {
        el: '.swiper-pagination',   
        clickable: true,   // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
        type: 'custom',  // 设置自定义分页
        // 自定义特殊类型分页器，当分页器类型设置为自定义时可用。
        renderCustom: function(swiper, current, total) {  
          var paginationHtml = " ";
          for (var i = 0; i < total; i++) {
            // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
            if (i === (current - 1)) {
              paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
            } else {
              paginationHtml += '<span class="swiper-pagination-customs"></span>';
            }
          }
          return paginationHtml;
        },

      },
        centeredSlides: true,   // 设定为true时，active slide会居中，而不是默认状态下的居左
        autoplay: {
        delay: 2500,   // 设置自动滚动的时间
        disableOnInteraction: false,   // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
      },
    	navigation: {
       nextEl: '.swiper-button-next',   // 选择前进后退按钮
       prevEl: '.swiper-button-prev',
       hideOnClick: true,    // 点击slide时显示/隐藏按钮。
      },
      loop: true,    //  开启无缝滚动
   		direction: 'vertical',  //可设置为水平方向切换(horizontal)或垂直方向切换(vertical)。
      slidesPerView: 'auto',  // 设置slider容器能够同时显示的slides数量(carousel模式)。
    });