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

Після цього ваше зображення з текстом успішно додано до слайдера.

Сподіваюся, що цей слайдер допоможе Вам у вирішенні поставленого завдання та будегарним наочним прикладом.