TimedSlider являє собою легкий слайдер, який автоматично прокручує вкладки за допомогою слайдів на основі користувацького таймера. Слайди мають лише основний дизайн, тому ви можете додатково налаштовувати їх за потребою.
Приклади використання включають створення слайдів з будь-якою комбінацією вікі-тексту або зображень чи створення 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=sharknado те sharknado]</span>
</div>
Приклад
Що це таке, ?
Ця анімація виглядає як GIF, але це не так.
Configuration
- Параметр
data-delay-ms- Description
- Встановлює затримку (у мілісекундах) між тим, коли змінюються слайди. Значення за замовчуванням — 2000 (або 2 секунди). Мінімальне значення — 100 – таймер неможливо встановити швидше, ніж це.
- Example
<div class="ts-container" data-delay-ms="500">
<!-- слайди всередині контейнера, як показано в розділі «Використання» -->
</div>