Fandom Developers Wiki
Advertisement

TimedSlider — это лёгкий слайдер, который автоматически вводит вкладки с установленными слайдами на основе пользовательского таймера. Слайды имеют только обычный стиль, поэтому вы можете дополнительно их настроить по мере необходимости.

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

Установка[]

Использование[]

Использование блок-элементов слайдов[]

Для базового использования требуется следующий код 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>

Демонстрация[]

Slide #1
Slide #2
Slide #3

Что это такое, птицасамолётНЛОшаркнадо?


Анимация. Как GIF, но это не так.

Timedslider1
Timedslider2
Timedslider3
Timedslider4

Настройка[]

Вариант
data-delay-ms
Описание
Устанавливает задержку (в миллисекундах) между изменением слайдов. Значение по умолчанию — 2000 (или 2 секунды). Минимальное значение равно 100 — невозможно установить таймер быстрее этого.
Пример
<div class="ts-container" data-delay-ms="500">
    <!-- слайды внутри контейнера, как показано в разделе «Использование» -->
</div>
Advertisement