Приклад слайдера, керованого лише за допомогою CSS3
Швидкий розвиток програмного забезпечення та зростання продуктивності комп'ютерного обладнання призводять до необхідності ефективного коду. Для оживлення статичного сайту можна використовувати, наприклад, jQuery('.spoiler').show(), щоб організувати просту бізнес-логіку на стороні клієнта.
Сучасні технології дозволяють розв'язувати задачі без глибокого розуміння процесу. Для підвищення кругозору рекомендуємо ознайомитися з прикладом реалізації бізнес-логіки сайту без скриптів.
Все побудовано на особливостях двох селекторів
Родич (+) вказує на першого сусіда справа, а обобщений родич (~) вказує на всіх сусідів справа на тому ж рівні ієрархії.
Створюємо навігатори - кнопки, прапорці і т.д.
Використання самоуправляючихся тегів у HTML спрощує стилізацію елементів. У CSS3 немає селектора, який вказує, що стилі застосовуються до попереднього елемента. Це з'явиться у CSS4.
Створюємо загальні обробки подій
Загальні обробки задають стиль для кожного типу навігатора при певній події, наприклад, наведенні курсору на кнопку.
Створюємо частини вмісту
Розміщення контенту в html-структурі вимагає унікальних міток для подальшого доступу. Управляємі частини стилізуються за допомогою обобщеного родича.
Створюємо приватні обробки подій
Ці обробки задаються для конкретного навігатора з використанням обобщеного родича.
Очевидні недоліки
- Необхідність розміщати навігатор перед управляємою частиною контенту в html-структурі.
- Обмеження щодо місця розташування навігатора в глибині DOM-структури.
- Важкість управління теневим флажком та кнопкою.
- Проблема розриву зв'язку між флажком та кнопкою.
Від автора
- Звертайте увагу на анімацію слайдера.
- Створюйте модулі, управляючи їх чисто за допомогою CSS.
Посилання на живе демо
imperacms.ru/examples/css-slider/index.html - демонстрація сторінки.