# swiper
Slideshow or carousel container.
# Children Elements
This element supports any element as children nodes, except list
elements.
# Attributes
In addition to the common attributes, this element may contain the following attributes.
# index
Index of the currently displayed item in the list of children elements.
- Type:
number
- Default value:
0
- Mandatory: no
# autoplay
Flag that indicates if the component displays all the elements automatically without user interaction.
- Type:
boolean
- Default value:
false
- Mandatory: no
# interval
Interval (in milliseconds) for displaying the elements during the autoplay
animation.
- Type:
number
- Default value:
3000
- Mandatory: no
# indicator
Flag that indicates whether to enable an indicator with different options to display. This is used to inform the user the position of the current displayed element in the list of options.
- Type:
boolean
- Default value:
true
- Mandatory: no
# loop
Flag that indicates if the slideshow is in an infinite loop.
- Type:
boolean
- Default value:
true
- Mandatory: no
# duration
Length of a complete animation cycle.
- Type:
number
- Default value: -
- Mandatory: no
# vertical
Flag to indicate the direction of the swipe component (horizontal by default).
- Type:
boolean
- Default value:
false
- Mandatory: no
# previousmargin
Visual margin to show a small part of the previous item in the slideshow cycle.
- Type:
string
(length inpx
and percentage%
) - Default value:
0px
- Mandatory: no
# nextmargin
Visual margin to show a small part of the next item in the slideshow cycle.
- Type:
string
(length inpx
and percentage%
) - Default value:
0px
- Mandatory: no
TIP
The sum of previousmargin
and nextmargin
cannot exceed the half of the total component size. Otherwise, the system will truncate the exceeding part.
# CSS Properties
In addition to the common styles, this element supports the following styling properties:
# indicator-color
Color of the indicator (marker with the visual index of the elements in the slideshow).
- Type:
<color>
- Default value:
rgba(0,0,0,0.50)
- Mandatory: no
# indicator-selected-color
Color of the indicator currently selected (marker with the visual index of the elements in the slideshow).
- Type:
<color>
- Default value:
rgba(51,180,255,1.0)
- Mandatory: no
# indicator-size
Diameter of an indicator.
- Type:
<length>
- Default value:
20px
- Mandatory: no
# indicator-top|left|right|bottom
Position of the indicator relative to the swiper component.
- Type:
<length-percentage>
- Default value: -
- Mandatory: no
# Events
In addition to the common events, this element supports the following event:
# change
This event is triggered when the element displayed in the swiper changes.
Additional parameters:
{ index: number }
# Methods
This element has the following method:
# swipeTo({index})
Select the element specified by the index on the slideshow.
Parameters:
object
with the following attributes:index: number
(mandatory). Index with the position to display
Example:
this.$element('swiper').swipeTo({ index:2 })
# Example
<template>
<div class="container">
<div class="mt-item mlr-container bro-s">
<swiper style="height:282px;" interval="{{intervalTime}}" duration="{{animationTime}}" loop="{{isLoop}}" autoplay="{{isAutoplay}}" indicator="{{showIndicator}}" class="swiper">
<div class="swiper-item bg-green"></div>
<div class="swiper-item bg-gray"></div>
<div class="swiper-item bg-blue"></div>
</swiper>
</div>
<div class="info-container" style="margin-top: 24px;">
<div class="info-item border-bottom-1">
<text class="title">indicator</text>
<div class="result">
<switch checked="{{showIndicator}}" onchange="showIndicatorChange"></switch>
</div>
</div>
<div class="info-item border-bottom-1">
<text class="title">auto play</text>
<div class="result">
<switch checked="{{isAutoplay}}" onchange="isAutoplayChange"></switch>
</div>
</div>
<div class="info-item">
<text class="title">cycle through</text>
<div class="result">
<switch checked="{{isLoop}}" onchange="isLoopChange"></switch>
</div>
</div>
</div>
<div class="mt-item item-container">
<div class="info-item-container2">
<div class="top">
<text class="name color-primary">autoplay interval (ms)</text>
<text class="value color-secondary">{{intervalTime}}</text>
</div>
<div class="bottom row-center">
<slider class="slider" min="0" max="3000" step="1" value="{{intervalTime}}" onchange="intervalTimeChange"></slider>
</div>
</div>
<div class="info-item-container2">
<div class="top">
<text class="name color-primary">animation duration (ms)</text>
<text class="value color-secondary">{{animationTime}}</text>
</div>
<div class="bottom row-center">
<slider class="slider" min="0" max="3000" step="1" value="{{animationTime}}" onchange="animationTimeChange"></slider>
</div>
</div>
</div>
</div>
</template>
<style lang="sass">
.info-item-container2 {
flex-direction: column;
.top {
height: 100px;
.name {
width: 100%;
}
.value {
flex-basis: 200px;
text-align: right;
}
}
.bottom {
height: 80px;
flex-direction: column;
}
}
</style>
<script>
module.exports = {
public: {
showIndicator: true,
isAutoplay:false,
isLoop:true,
animationTime:300,
intervalTime:1000,
},
showIndicatorChange({ checked }) {
this.showIndicator = checked;
},
isAutoplayChange({checked}){
this.isAutoplay = checked;
},
isLoopChange({checked}){
this.isLoop = checked;
},
animationTimeChange({progress}){
this.animationTime = progress;
},
intervalTimeChange({progress}){
this.intervalTime = progress;
}
}
</script>