Прыклады выкарыстання ўлучаюць стварэнне слайдаў з кожнай камбінацыяй вікі-тэксту ці выяў ці стварэнне GIF-падобных анімацый з набораў нерухомых выяў.

Installation

Usage

Выкарыстанне блок-элементаў слайдаў

Для базавага выкарыстання патрабуецца наступны код HTML:

<div class="ts-container">
	<div class="ts-slide ts-active">Slide #1</div>
	<div class="ts-slide">Slide #2</div>
	<div class="ts-slide">Slide #3</div>
</div>

• Каб стварыць слайдар, вам патрэбныя тэгі <div class="ts-container"></div>.
• Каб стварыць асобныя слайды, дадайце яшчэ адзін <div class="ts-slide">Ваш змест тут</div> усярэдзіне кантэйнера.
• Настойліва рэкамендуецца (але не абавязкова), каб вы зрабілі «адзін» са слайдаў class="ts-active" у ваш HTML, як паказана ў прыкладзе вышэй. Гэта клас, які вызначае бягучы бачны слайд. Калі вы гэта зробіце, ён будзе працаваць як выдатны збоеўстойлівы варыянт, калі JavaScript для слайдара не загружаецца.

Выкарыстанне ўбудаваных слайдаў

Вы таксама можаце рабіць убудаваныя слайды, прыкладам, пераключэнне аднаго слова ў сярэдзіне прапановы:

<div class="ts-container ts-container-inline">
    <span class="ts-slide">птушка</span>
    <span class="ts-slide">самалёт</span>
    <span class="ts-slide">НЛА</span>
    <span class="ts-slide">[https://www.google.com/search?output=search&q=шаркнадо шаркнадо]</span>
</div>

Дэманстрацыя

Што гэта такое, птушкасамалётНЛАшаркнадо?

Анімацыя. Як GIF, але гэта не так.

Configuration

Варыянт

data-delay-ms

Description

Усталёўвае затрымку (у мілісекундах) паміж зменай слайдаў. Значэнне па змаўчанні — 2000 (ці 2 секунды). Мінімальнае значэнне роўна 100 — немагчыма ўсталяваць таймер хутчэй гэтага.

Example

<div class="ts-container" data-delay-ms="500">
    <!-- слайды ўсярэдзіне кантэйнера, як паказана ў падзеле «Выкарыстанне» -->
</div>