WeChat Mini Program Example: Implementing 3D carousel special effects code

不言

Release： 2018-08-29 09:46:25

Original

8533 people have browsed it

This article brings you an example of a WeChat applet: the code to implement 3D carousel special effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When writing the WeChat applet, I wrote about the effect of achieving a 3D carousel. You can directly use the component swiper that comes with the WeChat applet to achieve it.

The effect diagram is as follows :

WeChat Mini Program Example: Implementing 3D carousel special effects code

1. Relevant attributes of swiper

indicator-dots Whether to display small dots, you can also reset it yourself Set whether the small dot

circular is connected to the sliding, which is to achieve infinite scrolling

The distance between previous-margin and the previous picture

next-margin and the next picture Spacing

autoplay to achieve automatic scrolling

Here we mainly use circular to achieve infinite scrolling, and then add the front and back spacing, and then set the level and transparency of the image. Set the height of the image and container. It’s almost possible

wxml file

<!--carousel/index.wxml-->
<swiper>
  <block>
    <swiper-item>
      <image></image>
    </swiper-item>
  </block>
</swiper>

Copy after login

wxss file

/* carousel/index.wxss */
page{
  background: #f7f7f7f7;
}
.imageContainer{
  width: 100%;
  height: 500rpx;
  background: #000;
}
.item{
  height: 500rpx;
}
.itemImg{
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
}
.active{
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition:all .2s ease-in 0s;
}

Copy after login

JS file

// carousel/index.js
Page({

  data: {
    currentIndex: 0
  },

  onLoad: function (options) {
  
  },
  /* 这里实现控制中间凸显图片的样式 */
  handleChange: function(e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})

Copy after login

Related recommendations:

WeChat applet Examples of development of carousel chart function

Sharing of examples of WeChat applet completing carousel chart effects

The above is the detailed content of WeChat Mini Program Example: Implementing 3D carousel special effects code. For more information, please follow other related articles on the PHP Chinese website!