How to create seamless carousel in WeChat mini program

angryTom
Release: 2020-03-21 18:01:06
Original
3008 people have browsed it

How to create seamless carousel in WeChat mini program

How to do seamless carousel in WeChat mini program

Define the topScroll array in the index.js file and For each attribute value of swiper, and what its attributes represent, please refer to the development documentation https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1476197489605

You can use the swiper component to achieve the carousel effect in WeChat mini programs, add the autoplay attribute to achieve automatic playback, and add the circular attribute to achieve seamless carousel.

<swiper circular="{{circular}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{topScroll}}" wx:key="item.id">
        <swiper-item>
            <image src="{{item.url}}" class="slide-image"/>
        </swiper-item>
    </block>
</swiper>
Copy after login

Recommended learning: Small program development

The above is the detailed content of How to create seamless carousel in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!

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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!