swiper在loop循環模下數據量小於slidesPerView的值時會重複出現解決辦法

# 在loop循環模式數據量小於slidesPerView的值時會重複出現，以下圖效果

# 咱們須要根據後臺返回的數據進行渲染並初始化swiper，代碼實現

## html+css代碼

// html
<div class="container">
  <div class="left">
    <div class="up">
      <div class="swiper-container swiper-container-vertical s1">
        <div class="swiper-wrapper">
        </div>
      </div>
    </div>
    <div class="down"></div>
  </div>
  <div class="right"></div>
</div>
// css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
}

.container>div {
  flex: 1;
}

.container .left>div {
  height: 50%;
}

.container .left .up {
  background: #ccc;
}

/*這個代碼不能少 也就是必須給swiper-container指定高度,此處是和本身的父級同樣高*/
.s1 {
  height: 100%;
}

.s1 .swiper-wrapper {
  /* flex-direction: column; */
}

.s1 .swiper-wrapper>div {
  /* height: calc(100% / 4); */
}

## 核心代碼說明

## js代碼

let swiper1;
let data = [];

$(function () {
  // 1.獲取數據
  getData()
  // 2.渲界
  initUI()
  if (data.length > 4) {
    // 3.初始化swiper
    initSwiper()
  } else {
    // 獲取父級的高度
    let h = $('.swiper-wrapper').height() / 4
    // 求出每一個swiper-slide的高度
    $('.s1 .swiper-wrapper .swiper-slide').css('height', h)
  }
})

function getData() {
  // 在這個地進行控制數據量
  for (let i = 0; i < 5; i++) {
    data.push(i)
  }
}

function initUI() {
  let html = ''
  data.forEach((item, index) => {
    let color = index % 2 ? '#1acd7e' : '#fb3'
    html += `<div class="swiper-slide" style="background: ${color}">${item}</div>`
  })
  $('.s1 .swiper-wrapper').html(html)
}

function initSwiper() {
  swiper1 = new Swiper('.s1', {
    autoplay: true,
    slidesPerView: '4', //  顯示區域顯示幾個
    direction: 'vertical',
    loop: true,
  })
}

## 核心代碼說明

當數據條數不足的時候，建議用js來計算每一個swiper-slide的高度

# 總結

1.在loop循環模式下數據量小於slidesPerView的值時會重複出現，須要添加判斷，當數據不夠時，能夠不進行初始化swiper，那麼這個時候須要本身手動設置每一個swier-slide的高度