До речі, коли ми закінчимо, абсолютно також ви зможете зробити в css адаптивний слайдер, всього лише потрібно буде змінити width у головного контейнера на max-width і поправити зображення.
Визначаємося з фотографіями
Для початку давайте виконаємо не найбільшу складну роботу - знайдемо в інтернеті фотографії, які будуть використані в якості слайдів. Припустимо, нехай це будуть тварини. Я знайшов три картинки (наш слайдер буде дуже простим, на три слайда): лева, тигра і пантери. Потрібно їх привести до потрібних розмірів.
Відповідно, ви повинні визначити, якою буде розмір слайдера. Наприклад, 500 пікселів в ширину і 350 в висоту. Пізніше ми запишемо це в стилі, зараз просто плануємо.
Починаємо з базової розмітки
Добре, картинки обрані і підготовлені, міні-план в голові є, починаємо з простого html-коду:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Нехай це буде головний контейнер, в якому буде лежати наш майбутній слайдер і кнопки для управління ним. Всю решту розмітку, яку я буду показувати, потрібно додавати в нього.
Ми створили три радиокнопки, одна з них буде відзначено за замовчуванням. Кожна з них отримує свій, унікальний ідентифікатор. Трохи пізніше ми додамо до них підписи.
Також потрібно додати в розмітку самі блоки для слайдів:
Як бачимо, вони потрапляють в окремий контейнер.
В окремому блоці створюється три так званих підписи до цих кнопок, але в даному випадку вони будуть служити нам для іншого.
За допомогою атрибута for пов'язуємо кожен підпис з одного з кнопок, це дозволить нам красиво оформити їх. Чи не самі радиокнопки, тому що на них, на жаль, стилі не діють, а лейбли. Зв'язка дозволяє зробити так, що при кліці на підпис автоматично стає обраної і радіо-кнопка, що для нас дуже корисно.
Починаємо все це стилізувати в css
Для початку потрібно задати стилі для загального контейнера.
Так ми добиваємося для нього раніше запланованих розмірів, а також дамо невеликий відступ зверху і відносне позиціонування, щоб усередині контейнера всі елементи можна було позиціонувати абсолютно.
Наступним дією приховуємо зі сторінки радиокнопки, все одно оформити ми їх не можемо і толку від них немає.
Наступний крок - ми оформляємо сам блок-слайдер і його вміст - слайди.
Задавши ширину і висоту зі значенням inherit ми практично вказуємо, щоб браузер брав ці значення у блоку wrap. Таким чином, ці блоку отримають ширину 500 і висоту 350 пікселів, як нам і потрібно.
Далі вказуємо кожного слайда своє фонове зображення. Оскільки їм вказана прозорість, то ми не побачимо поки ніяких змін. Правда, якщо поміняти opacity з 0 на 1, то ми побачимо нашу пантеру в якості фону, по давайте повернемо прозорість на 0.
Оформляємо підпису (а по суті наші перемикачі)
Для початку потрібно їх розташувати приблизно по центру. Я зробив це за допомогою абсолютного позиціонування і негативного зовнішнього відступу. Є таке правило центрування за допомогою абсолютного позиціонування: задай координату left: 50%, після чого зроби негативний відступ зліва на половину ширини елемента.
Ці правила стилізують наш лейбл, а за допомогою псевдоелемента ми створимо для кнопок рамки і спозіціоніруем їх.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Також додали закруглення в 20%. Зараз ви побачите тільки три зелених квадратика, тепер залишається зробити так, щоб при кліці по ним в них змінювалися стилі. Для реалізації всього цього ось такі нам потрібні чарівні селектори:
А відбувається ось що. За замовчуванням наші лейбли (квадратики) білі і їх не видно, тільки зелені рамки. Цими селекторами ми як би говоримо браузеру: якщо кнопка # point1 обрана користувачем, зміни стилі лейблу під номером 1, якщо ж обрана # point2, застосуй цей стиль для другого лейбла. Я розумію, що вам можливо, важко все це усвідомити, якщо ви новачок. У цьому прикладі використано два псевдокласу, а також символ
який дозволяє вибрати елементи, що лежать за вказаними перед ним селектором. Кілька простих прикладів вам, щоб було зрозуміліше:
p - вибере все абзаци, які в розмітці знаходяться після Дивов.
item - все елементи з класом item, які в розмітці знаходяться далі блоку з ідентифікатором wrap. Ті, що перед цим блоком, обрані не будуть.
Я думаю, тепер вам стало зрозуміло. Ну а псевдоклас: checked є одним з нововведень CSS3 і дозволяє застосовувати стилі в залежності від того, обрана чи радіокнопка або чекбокс чи ні.
Отже, з роз'ясненнями на цьому все, тому що зараз належить найголовніше, змусити всі, нарешті, заробити! Додаємо чергові чарівні селектори:
Тут бачимо використання: checked і
знову, але оскільки я вам вже пояснив їх, то ви можете здогадатися, що роблять ці селектори. А ось, по суті, яка команда віддається браузеру: коли людина вибере першу кнопку, зроби видимим відповідне фото. Як бачите, ми змінюємо z-index, тобто номер шару, а також прибираємо повну прозорість, замінивши її на повну непрозорість.
Оскільки раніше ми з вами з css прописали для кожного слайда своє фонове зображення, тепер вони будуть підставлятися і ставати видимими. Автоматично після завантаження сторінки в слайдері з'явитися зображення лева, при кліці по другій кнопці - тигр, при кліку по третин - пантера. Наш слайдер працює безвідмовно!
Та сама застереження
На початку я говорив, що з появою css3 можна зробити слайдер чисто за рахунок цієї технології, без використання скриптів, але з деякими застереженнями. Так ось, як ви розумієте, створений нами слайдер НЕ буде сам перемикати слайди, це можливо тільки до тих пір, поки людина клацає по клавішах. Так, потрібно враховувати такі обмеження.
Додавання ефектів і додаткових слайдів
Таким чином, ви можете додати необмежену кількість нових слайдів. Для цього вам всього лише потрібно додати:
нову підпис (label)
новий слайд і фотографію до нього
Плюс не забути додати нові селектори в таблицю стилів. Також я хотів би сказати, що в цій статті ми з вами реалізували дуже простий слайдер. Без наворотів, як то кажуть.
Додати ефекти насправді не дуже складно. Всього лише додайте плавний перехід до слайдів, а також бажані перетворення.
Тепер фотографії нахилені на 55 градусів, а також до них застосовано поворот кольору в 90 градусів. Але через те, що слайди за замовчуванням приховані, ми всього цього не побачимо. Так і треба, зате ми побачимо скасування цих ефектів, коли буде перемикати слайди. Оскільки заданий плавний перехід, скасування ефектів буде відбуватися плавно, і ми побачимо, як фотографії поврачіваются в нормальний стан, а також побачимо переливання кольорів.
Зрозуміли суть? Ми задали ефект невидимим зображенням, а при їх появі ми встигаємо помітити скасування ефектів. Тут я, звичайно, не використав всі необхідні Вендорний префікси, щоб все працювало і в більш старих браузерах, але це тільки заради економії місця і часу. Загалом, додавання цих ефектів я зробив тільки заради прикладу, на ділі ми можете додати свої ефекти, які захочете.
Мабуть, на цьому я закінчу сьогоднішню статтю. Ми з вами зробили слайдер з красивим ефектів перегортання появи нових фотографій. Звичайно, він має явні мінуси, але зате це слайдер на чистому css3. Ну а дізнатися більше про цю технологію ви можете з нашого курсу, там же ви можете краще розібратися з новими селекторами.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
Створення інтернет-магазину на WooCommerce
Інтернет-магазин на OpenCart. Створення магазину з унікальним шаблоном
Препроцесори Sass і Less. Автоматизація та спрощення Front-end розробки
Веб-дизайнер - професіонал. Створення затребуваних макетів
Фреймворк Laravel з Нулі до Профі
Фреймворк YII2 з Нулі до Профі
HTML5 та CSS3 з Нулі до Профі
Фреймворк Bootstrap: практика адаптивної верстки від А до Я
Joomla-Професіонал: створення розширень для Joomla
Практика монетизації блогу: від розкрутки до реальних грошей
Фреймворк CakePHP: з Нулі до Гуру на прикладі створення корпоративного сайту
Практика оптимізації сайту: прискорення завантаження вашого сайту в рази!
Інтернет магазин на Joomla!
«WordPress-професіонал» - занурення в світ API Wordpress
Joomla-Майстер: з нуля до Преміум шаблону
WordPress-Майстер: від Особистого блогу до Преміум-шаблону
Практика верстки сайту під мобільні пристрої
Преміум уроки по створенню сайту
Практика HTML5 та CSS3 з нуля до результату за вечір
Детальніше