Swipe Library: How to Use Data Sources

Last updated: 29 days ago

Category: Examples

The Swipe module is a carousel and rotating banner module that enables the cyclic display of media content such as text, images, videos, and iframes. It supports drag-and-drop scrolling as well as button-click slider switching. It also supports asynchronous content fetching, insertion, and deletion of sliders. The module responds to changes in sliders and the outer container, automatically adjusting the relationships between sliders.

Using content

Although slider nodes can be directly written inside the parent container, when dealing with unknown or complex data sources, it's common practice to pass data through the content parameter.

Node Array Data

If the slider data comes from a list, you can directly pass the node array of that list into the content parameter.

Content as String

When the content parameter is a string, it could be a request URL, multiple request URLs, or plain text. In this case, the contType parameter is needed to determine the type.

Filling Plain Text

When content is a string, it will by default be added as plain text into the wrap container.

Filling Multiple Media

If the format is content='url1,url2,url3', set contType=images/videos/audios/iframes to indicate multiple media URLs are passed.

Single Asynchronous URL

When content is a single asynchronous request URL, set contType:async. If data needs to be sent to the URL, use the contData parameter (a plain object).

If the response data items lack a content property (non-standard data), use tplStr and tplEng to generate fillable slider content.

You can also request json data, typically a standard object with a content property.

Non-Standard Object Array Data

When passing non-standard object arrays (without content property), use tplStr and tplEng:

Standard Object Array Data

Passing string arrays or node arrays directly as the content parameter is not commonly used in project development. The more standard approach is to use arrays of structured objects.

Mixed Data

When content is a standard object array, complex data formats are supported where each item's content can vary. For async items (contType:async), ensure the response format is known. If it returns an object/array, use tplStr and tplEng.

Mixed data can also be loaded asynchronously: