swiper 显示一个半

Swiper 是一个非常流行的 JavaScript 滑动组件库，常用于创建响应式的触摸滑动效果，比如轮播图、幻灯片展示等。如果你想要在一个 Swiper 实例中显示半个屏幕的内容，可以通过调整 Swiper 的配置或者使用特定的选项来实现。以下是一个基本的示例：

1. **设置 slidesPerView (幻灯片每视图数量) 和 spaceBetween (幻灯片之间的间距)**：如果你想让幻灯片占半个屏幕，可以设置 `slidesPerView: 'auto'` 或者 `'0.5'`，然后根据需要调整 `spaceBetween` 来控制间隙。

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  spaceBetween: 0, // 或者设置为适当的值，如：spaceBetween: '50%' 来显示半个屏幕宽的间隙
  // 其他参数...
});

2. **设置 loop 和 direction**：如果希望循环滚动并显示半个屏幕，可以设置 `loop: true` 和 `direction: 'horizontal'`。这样可以形成一个半圆形的路径。

swiper.params.loop = true;
swiper.params.direction = 'horizontal';

3. **CSS 自定义**：你也可以直接在 CSS 中调整容器的宽度和幻灯片的宽度，使其看起来像是半个屏幕。例如：

.swiper-container {
  width: 50%; /* 设置容器宽度为50% */
}

.swiper-slide {
  width: calc(100% / 2); /* 设置幻灯片宽度为容器的一半 */
}