spz-carousel

Displays multiple similar pieces of content.

布局

Usage

The carousel consists of an arbitrary number of items, as well as optional navigational arrows to go forward or backward.

In the example below, the controls attribute manually controls the carousel to change to the next or the previous slide. The initial-slide attribute indicates to display of the second slide by default. autoplay and delay attributes can automatically switch to the next carousel at an interval of 7000 milliseconds.

<spz-carousel layout="fixed-height" height="500" initial-slide="1" controls autoplay delay="7000" loop>
  <spz-img layout="fixed-height" height="500" src="./images/1.jpg" object-fit="cover"></spz-img>
  <spz-img layout="fixed-height" height="500" src="./images/2.jpg" object-fit="cover"></spz-img>
  <spz-img layout="fixed-height" height="500" src="./images/3.jpg" object-fit="cover"></spz-img>
</spz-carousel>

Attributes

initial-slide

A nonnegative integer, defaults to 0. Set an initial slide by default.

advance-count

A positive integer, defaults to 1. Set how many slides to scroll at a time.

visible-count

A positive integer, defaults to 1. Set how many slides to visible at a time.

slidezoom

If this attribute is present, enable the carousel zoom by click.

direct

Set the scrolling direction of the carousel. Its default value is horizontal. If its values is vertical, it means that the carousel scrolls in the vertical direction.

delay

A milliseconds number, defaults to 5000. Set the time interval for automatic switching between slideshows. It must be used with the autoplay attribute.

autoplay

If this attribute is present, the carousel can scroll automatically.

loop

If this attribute is present, the carousel can loop to scroll.

controls

If this attribute is present, the carousel has a pair of arrows to change the slide.

slide

If this attribute is present, the carousel scrolls with fade for transition.

zoom-in

The carousel will be have a zoom-in attribute when it enters zoom in.

select

select=“<number>”

Indicates which slide is currently displayed. It is added on the i-spzhtml-slides-container container element.

<spz-carousel layout="container">
  <!-- Currently showing the second slide -->
  <div class="i-spzhtml-slides-container" select="1">
    <!-- ... -->
  </div>
</spz-carousel>

Actions

goToSlide

Using to change the slide to specify an index. It has the following parameters:

Parameter	Description	Type	Required
index	Specify an index to scroll to a specific slide	number(Positive Integer)	Yes
animate	Indicates scrolls with an animation, if its value is `true`	boolean	No
direct	same as `direct` attribute	-	No

<spz-carousel id="carousel" layout="fixed-height" height="500" initial-slide="0">
  <!-- ... -->
</spz-carousel>

<button type="button" @tap="carousel.goToSlide(index=2, animate=true);">Go to the second slide</button>

updateCount

Update the value of the advance-count attribute. It has the following parameters:

Parameter	Description	Type	Required
count	Set the value of the `advance-count` attribute	number(Positive Integer)	Yes
isZoom	Indicates the carousel currently is zooming, if its value is `true`	boolean	Yes

<spz-carousel id="carousel" layout="fixed-height" height="500" initial-slide="0" controls>
  <!-- ... -->
</spz-carousel>

<button type="button" @tap="carousel.updateCount(count=2, isZoom=false);">Update `advance-count` to 2</button>

updateVisible

Update the value of the visible-count attribute. It has the following parameters:

Parameter	Description	Type	Required
count	Set the value of the `visible-count` attribute	number(Positive Integer)	Yes

updateDirect

Update the value of the direct attribute. It has the following parameters:

Parameter	Description	Type	Required
direct	Same as `direct` attribute. Optional: `vertical` \| `horizontal`	string	Yes

Events

event object data

Below is the event object data for mounted, slideChange, and slideEnd.

Note that originData is the raw event object data.

{
  "index": 0, // the current slide index
  "isImage": true, // If true, the current slide is an image.
  "path": "./images/1.png", // the current slide src
  "tagName": "SPZ-IMG", // the current slide tagName
  "total": 3, // total number of slides
  "originData": {
    // ...
  }
}

mounted

Be automatically triggered when the carousel is built.

slideChange

Be automatically triggered when the carousel changes.

slideEnd

Be automatically triggered when a slide of the carousel changes end.

<div id="text">A slide changes end.</div>

<spz-carousel
  layout="fixed-height"
  height="500"
  initial-slide="1"
  controls
  @slideChange="text.toggleClass(class='hidden', force=true);"
  @slideEnd="text.toggleClass(class='hidden', force=false);"
>
  <!-- ... -->
</spz-carousel>

zoomIn

Be automatically triggered when the carousel enters zoom mode.

zoomOut

Be automatically triggered when the carousel exits zoom mode.

<div id="text" hidden>Zoom in</div>

<spz-carousel
  layout="fixed-height"
  height="500"
  initial-slide="0"
  slidezoom
  @zoomIn="text.toggleClass(class='hidden', force=false);"
  @zoomOut="text.toggleClass(class='hidden', force=true);"
>
  <spz-img layout="fixed-height" height="500" src="./images/1.jpg" object-fit="cover"></spz-img>
  <spz-img layout="fixed-height" height="500" src="./images/2.jpg" object-fit="cover"></spz-img>
</spz-carousel>