小程序满屏左右滑swiper动幻灯片

在小程序中实现满屏左右滑动的幻灯片效果，通常需要使用 swiper 组件。swiper 是微信小程序提供的一个容器组件，用于实现滑动视图容器。以下是一个简单的示例代码，展示如何实现这一效果。

1. WXML 文件（index.wxml）

<view class="container">
  <swiper
    indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}"
    interval="{{interval}}"
    duration="{{duration}}"
    circular="{{circular}}"
    class="swiper-container"
  >
    <block wx:for="{{images}}" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="slide-image" mode="aspectFill"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

2. WXSS 文件（index.wxss）

.container {
  height: 100vh; /* 使容器占满全屏 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.slide-image {
  width: 100%;
  height: 100%;
}

3. JS 文件（index.js）

Page({
  data: {
    indicatorDots: true, // 是否显示面板指示点
    autoplay: true, // 是否自动切换
    interval: 3000, // 自动切换时间间隔
    duration: 500, // 滑动动画时长
    circular: true, // 是否采用衔接滑动
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
      // 添加更多图片链接
    ]
  }
});

4. JSON 文件（index.json）

{
  "navigationBarTitleText": "幻灯片"
}

• er 组件来创建幻灯片视图容器。

• indicator-dots 属性控制是否显示指示点。

• autoplay 属性控制是否自动播放。

• interval 属性设置自动切换的时间间隔。

• duration 属性设置滑动动画的时长。

• circular 属性控制是否采用衔接滑动。

• swiper-item 组件包含每个幻灯片的内容，这里使用 image 组件显示图片。

WXSS 文件：

• 设置 .container 的高度为 100vh，使其占满全屏。

• 设置 .swiper-container 和 .slide-image 的宽度和高度为 100%，以确保幻灯片内容占满整个屏幕。

JS 文件：

• 在 data 对象中定义幻灯片的相关配置和图片链接数组。

JSON 文件：

• 设置导航栏标题。

注意事项

• 请确保图片链接是有效的，并且图片的尺寸适合全屏显示。

• 根据实际需求调整 interval 和 duration 的值。

通过上述代码，你就可以在小程序中实现一个满屏左右滑动的幻灯片效果。