Carousel image swiper problem in WeChat applet

高洛峰
Release: 2018-05-19 13:50:56
Original
3970 people have browsed it

How to cover the points of the system to achieve the effect you want after calling the carousel picture swiper of the WeChat applet

Not much to say, let’s go to the picture first and hope you can give us more opinions:

This is the rendering:

微信小程序的轮播图swiper问题

The WeChat applet rendering looks like this:

微信小程序的轮播图swiper问题

<view class="section section_gap swiper">
  <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block  wx:for="{{banner}}">
  <swiper-item >
    <navigator url="../../pages/lists/lists" hover-class="navigator-hover">
    <image src="{{item}}" class="swiper-item "></image>
    </navigator>
    </swiper-item>
    </block>
  </swiper>
</view>
Copy after login

The page display effect is as follows:

微信小程序的轮播图swiper问题

cannot be modified in the style. The style cannot achieve the effect I want.

Click in repeat and I modify .swiper repeat{width:8rpx; height:8rpx;background:rgba(255,255,255,.5);border-radius: 50%;}

What has been changed is the background as shown in the picture:

微信小程序的轮播图swiper问题

Can anyone give me some advice? Thank you. I hope I can help you. , learn together, thank you

For more carousel picture swiper issues in WeChat mini programs, please pay attention to the PHP Chinese website for related articles!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template