Swiper parameter Description

Source: Internet
Author: User
Tags wrapper

Reference http://www.xiaoshu168.com/jquery/103.html

Swiper initialization supports the following parameters

Parameter (Parameters) Type (types) Default Value (Defaults Example (example) Description (note)
Speed Number 300 600 Duration between slides slider animations (unit ms)
Eventtarget String ' Wrapper ' ' Container ' Swipers Event objects, all touch events in the default state can only be used for wrapper. You can use ' container ' if you need other elements to be included in the container and use Swipers. 2.4.2 Version New
AutoPlay Number 5000 - Transition delay Time (unit ms), the parameter is not specified in the case, does not take effect, (supplemental: When the user operation after the AutoPlay failure)
Autoplaydisableoninteraction Boolean True False When set to False, after the user action (Swipes,arrow and pagination click) AutoPlay will not be banned, the user will restart AutoPlay each time after the operation.
Autoplaystoponlast Boolean False True When set to false AutoPlay is invalidated under the last block (without setting the loop)
Mode String ' Horizontal ' ' Vertical ' Slides sliding mode, horizontal or vertical
Loop Boolean False True True for loop mode to take effect
Loopadditionalslides Number 0 2 Number of slides increased in loop mode
Loopedslides Number 1 2 Using Slidesperview: ' Auto ' in loop mode, you need to use this parameter to set the number of loop you want to use
Slidesperview Number

or ' auto '

1 4 In rotation mode, set the number of slides that the slider ' s container can display at the same time. In addition, the ' auto ' value is supported, and the number of slides is adjusted according to the container width of the container. ' Auto ' is not compatible with loop mode
Slidesperviewfit Boolean True False This parameter takes effect only if Slidesperview: ' Auto ' is set, and when the width of the slides is greater than the container. The default is true and then the width-wide slide transition is divided into two parts of the edge. When false, the slide transition is divided into multiple slides that are larger than the container container
Slidespergroup Number 1 2 Defines the number of slides as a group, valid in rotation mode. (Carousel mode)
Calculateheight Boolean False True When the value is true, Swiper calculates the container height based on the slides content. Very useful in a responsive layout or when you don't know the slides height (like a picture in response)
Roundlengths Boolean False True True, swiper the width and height, which is useful when the error is included in the response slider.
Csswidthandheight Boolean False True Value is true and container,wrapper and slides in Swiper are not highly
Updateformelements Boolean True False Swiper is reinitialized when all inline images (img tags) have been loaded and completed.
Watchactiveindex Boolean False True The index of the active block is dynamically computed when the touchscreen event is enabled.
Visiblilityfullfit Boolean False True If enabled, only "visible" slides will eventually fit in the container size
AutoResize Boolean True False False, when the window size changes, the slides adaptive
Domanimation Boolean True False Whether to use custom Dom animations on browsers that do not support CSS transitions (ie7-9)
Resistance Boolean or "100%" True False Disables resistant bounds (resistance bounce) When set to ' 100% ' when resistant (resistance) mode is enabled when the value is False
Noswiping Boolean False True True, the slide of the element is swiper when the new class "Noswipingclass" Slider is added.
Preventlinks Boolean True False Disable <a> label links when Touch slider (slides) is enabled
Preventlinkspropagation Boolean False True Set the value to True if you want to disable stoppropagation with preventlinks in the sliding process
Initialslide Number 2 0 Index of Initial block (page)
Usecss3transforms Boolean True False False disables CSS3 transforms (reduces memory, improves performance, and reduces beauty) while using wrapper left/top properties instead.

Free mode and slide block container (Scroll Container)

Parameter (Parameters) Type (types) Default Value (Defaults Example (example) Description (note
Freemode Boolean False True If the true slide coordinates are not fixed
Freemodefluid Boolean False True If true, releasing the slider will still slide for a little while.
Scrollcontainer Boolean False True When set to True, make swiper look like a sliding zone (scrollable area)
Momentumratio Number 1 2 The larger the value set, the greater the momentum distance when the slider is released
Momentumbounce Boolean True False False to disable free mode momentum elasticity
Momentumbounceratio Number 1 2 The greater the value, the more obvious the momentum elasticity (momentum bounce) effect.

Block (slides) offset

The offset of the
Parameter (parameters) type (type) default value (default value Example (example) Description (description
centeredslides boolean False true If true, the active block is centered instead of the default left
offsetpxbefore number 0 Slides Specify the offset to the left border of the wrapper
Offsetpxaf ter number 0 Specify the offset of slides and wrapper right border
Offsetslidesbefore number 0 2 slider slides and the left border of the wrapper is equal to the width of the specified slider slides number. This is useful in a responsive layout where you don't know slides width.
offsetslidesafter number 0 2 slider SLI Des and wrapper the offset of the right border is equal to the width of the slides number of the specified slider. This is useful in a responsive layout where you don't know slides width.

Touchscreen/mouse Event effects (touch/mouse interactions)

Parameter (Parameters) Type (types) Default Value (Defaults Example (example) Description (note
Touchratio Number 1 0.8 Touch screen ratio
Simulatetouch Boolean True False True,swiper accepts mouse events similar to touch-screen events. (Click and drag the slider)
Onlyexternal Boolean

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.