swiper repetirá la solución cuando la cantidad de datos en el modo de bucle sea menor que el valor de slidesPerView

# Aparecen repetidamente cuando la cantidad de datos en el modo de bucle es menor que el valor de slidesPerView, como se muestra en la siguiente figura

# Necesitamos renderizar e inicializar el swiper de acuerdo con los datos devueltos en segundo plano, implementación de código

## código html + css

// html 
<div class = "container"> 
  <div class = "left"> 
    <div class = "up"> 
      <div class = "swiper-container swiper-container-vertical s1"> 
        <div class = "swiper- envoltorio "> 
        </div> 
      </div> 
    </div> 
    <div class =" down "> </div> 
  </div> 
  <div class =" right "> </div> 
</div> 
// css 
* { 
  margen: 0; 
  acolchado: 0; 
  tamaño de caja: caja de borde; 
} 

html, 
cuerpo { 
  altura: 100%; 
} 

.container { 
  altura: 100%; 
  pantalla: flex; 
} 

.contenedor> div { 
  flex: 1; 
}

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

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

/ * Este código no puede ser menor, es decir, se debe especificar la altura para el contenedor-swiper, aquí está el padre Misma altura * / 
.s1 { 
  altura: 100%; 
} 

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

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

## Descripción del código central

## código js

let swiper1; 
let data = []; 

$ (function () { 
  // 1. Obtener datos 
  getData () 
  // 2. 
  Renderizar el mundo initUI () 
  if (data.length> 4) { 
    // 3. Inicializar swipe 
    initSwiper ( ) 
  } else { 
    // Obtiene la altura del padre 
    let h = $ ('. swiper-wrapper'). height () / 4 
    // Encuentra la altura de cada swipe-slide 
    $ ('. s1 .swiper-wrapper. swiper-slide '). css (' altura ', h) 
  } 
}) 

function getData () { 
  // Controla la cantidad de datos aquí 
  para (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 ', // 显示 区域 显示 几个
    dirección:' vertical ', 
    bucle: verdadero, 
  }) 
}

## Descripción del código central

Cuando el número de datos es insuficiente, se recomienda utilizar js para calcular la altura de cada deslizador.

# para resumir

1. En el modo de bucle, los datos se repetirán cuando la cantidad de datos sea menor que el valor de slidesPerView. Debe agregar un juicio. Cuando los datos no son suficientes, no puede inicializar el swiper, entonces debe configurar manualmente la altura de cada tobogán de natación en este momento