小程序swiper幻灯片左右滑动的代码示例

index.wxml

<view class="container">
  <swiper
    indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}"
    interval="{{interval}}"
    duration="{{duration}}"
    bindchange="bindChange"
    current="{{current}}"
  >
    <block wx:for="{{imgUrls}}" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>

index.wxss

/* pages/swiper/swiper.wxss */
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

index.js

Page({
  data: {
    indicatorDots: true, // 是否显示面板指示点
    autoplay: false, // 是否自动切换
    interval: 3000, // 自动切换时间间隔
    duration: 500, // 滑动动画时长
    current: 0, // 当前所在幻灯片的索引
    imgUrls: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
      // 添加更多图片URL
    ]
  },
  bindChange: function(e) {
    this.setData({
      current: e.detail.current
    });
  }
});

在这个示例中，我们使用了微信小程序的swiper组件来实现幻灯片的左右滑动效果。swiper组件包含了多个swiper-item子组件，每个子组件中放置了一张图片。通过配置swiper组件的属性，我们可以控制幻灯片的显示方式，如是否显示指示点、是否自动切换、切换的时间间隔等。

请注意，以上代码示例中的图片URL是占位符，你需要将其替换为你自己的图片资源。此外，你还可以根据实际需求调整swiper组件的属性值，以满足你的特定需求。

如果你使用的是其他小程序平台（如支付宝小程序、百度小程序等），虽然具体的组件和API可能有所不同，但实现幻灯片左右滑动的基本思路是相似的。你可以参考相应平台的官方文档，找到对应的滑动组件，并按照类似的方式进行实现。