Примеры использования включают создание слайдов с любой комбинацией вики-текста или изображений или создание 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>