Простий слайдер на JavaScript з текстом - Як зробити сайт з нуля самостійно без
- встановлення необмеженої кількості зображень;
- анімація зображень;
- можливість змінювати швидкість прокручування;
- зміна зовнішнього вигляду та відключення у разі потреби радіокнопок, кнопки стоп і далі
- анімація тексту
Для встановлення скрипта слайдера необхідно підключити до Вашої сторінки між тегами css «my-slider.css» та java script «tav-2.1.js».
код CSS слайдера:
Я не став копіювати і показувати весь CSS код, тому що сам файл є об'ємним і це може зайняти тривалий час, а в цьому прикладі відобразив лише основні команди CSS за допомогою яких можна редагувати і змінювати зовнішній вигляд Вашого майбутнього слайдера. Номер рядка суворо відповідає вказаному у файлі "my-slider.css"
Детальний опис додавання та видалення зображень:
- У файлі перед тегом додайте нове зображення з текстом аналогічно попередньому та розташуйте його перед тегом
- У коді (рядок 452-520) скопіюйте два останніх id #my-slider і вставте за ними змінивши class .tav-slide-5 на .tav-slide-6, якщо потрібно додати ще зображення, то зробіть аналогічно описаному;
- У коді (рядок 524-594) проробіть те саме, тобто. якщо у Вас три тексти, що спливають, то скопіюйте три останні рядки коду і додайте змінивши — .tav-slide-5 на 6 і т.д.;
- Ще одним етапом є додавання слайду для позиціонування, тексту, кольору та кордону (у коді рядок 597-812). Скопіюйте три останні id #my-slider і в класі tav-slide-5 змініть цифру на 6 (для видалення зображення повторіть описане з точністю навпаки).
Після цього ваше зображення з текстом успішно додано до слайдера.
Сподіваюся, що цей слайдер допоможе Вам у вирішенні поставленого завдання та будегарним наочним прикладом.