Home Daily Programming HTML Knowledge Explanation of important attributes in Mip carousel component

Explanation of important attributes in Mip carousel component

Nov 03, 2018 pm 04:23 PM

This article mainly introduces you to the important attributes in the MIP carousel component.

MIP, mobile web accelerator. Regarding the introduction of the MIP carousel component, in our previous article, we have introduced the use of the MIP component by giving an example of a carousel component. Then this simple carousel component example is

represents a display method used to support images in MIP, supporting multiple Picture carousel.

Recommended reference is the MIP user manual: "MIP Documentation Manual"

Below we will introduce to you the MIP carousel diagram with simple component code examples. important attributes.

<mip-carousel
    autoplay
    defer="1000" 
    layout="responsive"
    width="600"
    height="400"
    indicator
    buttonController
    >
    <a target="_blank" href="http://www.php.cn">
        <mip-img src="你的图片地址" layout="responsive"  width="600" height="400"></mip-img>
        <div class="mip-carousle-subtitle">这里是标题</div>
    </a>
    <mip-img src="你的图片地址"></mip-img>
    <mip-img src="你的图片地址"></mip-img>
</mip-carousel>
Copy after login

The above component code displays the following effect:

Explanation of important attributes in Mip carousel component

The important attributes that need to be noted here are as follows:

autoplay Attribute: Used to specify whether the carousel image will automatically play. Without this attribute, the carousel image can only be switched by clicking manually.

deferAttribute: Indicates the time interval of each rotation. If autoplay is set, you can add defer to specify the time interval of the rotation.

indicatorIdAttributes: The indicator function field below must be consistent with the id value of the indicator's parent node. The number of indicators and the number of items in the carousel must be consistent. The indicator is strongly dependent on id. The style can be modified by yourself. The example is the official default style, and the indicator can be clicked to position.

width and height attributes: respectively represent the image proportions set in conjunction with the height and width attributes. Not the actual width and height.

indicatorAttribute: Set the number of pages displayed on the carousel, as shown in the number on the lower right in the picture above.

layout Setting the value to responsive means that the image is allowed to adapt.

This article is an introduction to the important attributes in the MIP carousel component. I hope it will be helpful to friends in need!

The above is the detailed content of Explanation of important attributes in Mip carousel component. For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)