Якщо не використовувати бібліотеки, то сторінка працює краще (в зв'язку з меншою кількістю коду), і можна розташовувати створене слайд-шоу в будь-якому місці, не турбуючись про завантаження додаткових файлів.
Базове слайд-шоу
В HTML нам знадобиться контейнер для слайдів, а також самі слайди. Ось як це буде виглядати:
Ось як буде виглядати ядро CSS:
Тепер у нас є базове слайд-шоу.
Примітка по сумісності:
CSS переходи не підтримуються в IE версії 9 і нижче. У цих браузерах замість ефекту розчинення слайд-шоу буде плавно зникати, показуючи наступний слайд.
UX і доступність
Розглянемо, як слайд-шоу може погіршити досвід взаємодії користувача і доступність сайту.
Слайд-шоу може приховати важливий контент
Важлива інформація не повинна виводитися через слайд-шоу. За даними дослідження Університету Нотр-Дам, тільки 1,07% користувачів клацають по якому або елементу слайд-шоу. І з цих 1,07% тільки невелика частина, (3% або менше), клацає по якому-небудь слайду, крім першого. Це ілюструє, наскільки небезпечно розміщувати важливий контент в слайд-шоу.
Користувач може отримати викривлене уявлення про головну мету сайту
Ваш сайт повинен надавати користувачеві чіткий і очевидний шлях до того, що він повинен зробити. І якщо слайд-шоу заважає цьому, вам потрібно переглянути стратегію для цієї сторінки.
Фахівці компанії WiderFunnel. що займається оптимізацією конверсії, перевірили ефективність демонстрації слайдів, і прийшли до наступного висновку:
Ми не один раз протестували обертаються пропозиції і прийшли до висновку, що це поганий спосіб представлення вмісту.
Мобільні користувачі можуть бути не в захваті
Коли використовувати слайд-шоу
Коли ж насправді стоїть відображати слайд-шоу? Ось деякі пропозиції.
Створення загального враження
Коли вас не хвилює, чи зверне користувач увагу на вміст будь-якого окремого слайда, але необхідно створити загальне візуальне враження. Для цього слайд-шоу може відмінно підійти.
Коли до контенту легко отримати доступ і без слайд-шоу
Наприклад, щоб відобразити фотографії курорту, музею, події або лінійки продуктів у вигляді слайд-шоу. Але якщо на сайті є фотогалерея або розділ товарів. У цьому випадку цілком доцільно використовувати слайд-шоу.
Для загального поліпшення якості сайту
Використовувати слайд-шоу як акуратний візуальний елемент, який не має вирішального значення для функціоналу сайту. До тих пір, поки це доповнення не відволікає увагу від важливого контенту, все в порядку.
Покажчики для збільшення доступності
Щоб слайд-шоу стало більш доступним, ми додамо ряд елементів управління.
Додавання Керування показом шоу
Кнопка «Пауза / Програвати»
По-перше, додамо кнопку в HTML:
Ось як слайд-шоу буде працювати з кнопкою паузи:
Кнопки «Наступний» і «Попередній»
Спочатку додайте в HTML кнопки "Next" і "Previous":
... змініть на цей:
У наведеному вище скрипті ми для більшої гнучкості додали загальну функцію goToSlide. Ми також змінили математику всередині змінної currentSlide. щоб виключити негативні числа. Щоб перевірити себе, виберіть число для slides.length і подивіться, що станеться з currentSlide після n змін.
Тепер у нас є робочі елементи управління.
Ось як виглядає слайд-шоу з елементами управління і деякими додатковими стилями:
Також можна спробувати змінити стилі і розташування елементів управління, щоб їх призначення було гранично зрозуміло користувачам.
Змініть для класу .slide властивість position: absolute; на position: static ;. Таким чином, слайди за замовчуванням будуть виведені у вигляді списку.