Sharing examples of WeChat applet completing carousel effect

This article mainly introduces the effect of carousel chart in WeChat applet in detail, which has certain reference value. Interested friends can refer to

WeChat applet to realize carousel chart. The effect is similar to that of websites and APPs, with less code and high efficiency.

Let’s take a look at the renderings first:

##Mainly use swiper + swiper-item to achieve

 <view class=&#39;swiper&#39;>滑块视图容器</view>
<!--
 indicator-dots=&#39;true&#39; 是否显示指示点 默认 false
 indicator-color:指示点颜色
 indicator-active-color:选中的指示点颜色
 autoplay：是否自动切换 默认：false
 interval:自动切换时间间隔
 duration：滑动动画时长
 vertical 是否改成纵向， 默认 false
 -->

<swiper indicator-dots=&#39;true&#39; indicator-color=&#39;gray&#39; indicator-active-color=&#39;green&#39; autoplay=&#39;true&#39; interval=&#39;5000&#39; duration=&#39;500&#39;>
 <block wx:for="{{imgUrl}}">
  <swiper-item class="item_image">
   <image src=&#39;{{item}}&#39; class=&#39;swiper_image&#39; mode="aspectFill"></image>
  </swiper-item>
 </block>

</swiper>

A simple small case, a carousel chart, the code is concise and the function is powerful.

The above is the detailed content of Sharing examples of WeChat applet completing carousel effect. For more information, please follow other related articles on the PHP Chinese website!