У попередній статті ми розглянули, як зверстати простий слайдер за допомогою CSS без використання JS-скриптів. Зараз розберемо ще один варіант оформлення слайдера - з кнопками «вперед» і «назад».
Простий слайдер на CSS з кнопками «вперед» і «назад»
Перш ніж продовжити читання статті, рекомендую вам ознайомитися з попередньою статтею. в якій був детально розглянутий код простого слайдера.
А ось CSS може злегка підірвати мозок:
Розберемося, що тут відбувається. Ми задаємо для кнопки квадратний блок (ширина і висота 80 пікселів) і за допомогою властивості border-radius перетворюємо його в коло. Позиціонуємо його абсолютно таким чином, щоб половина блоку пішла за кордон контейнера. Завдяки властивості overflow: hidden контейнера, все, що вийшло за його межі, обрізається. Таким чином ми отримуємо два півкола.
Щоб відцентрувати кнопки по висоті, використовуємо наступний прийом. Виставляємо кнопці top: 50%. Таким чином, верхня межа кнопки буде знаходитися посередині контейнера. Також зазначаємо трансформацію - зсув по висоті на 50%: transform: translateY (-50%). Відсотки, зазначені в трансформації, відраховуються немає від розміру батьківського елемента (контейнера), а від розміру самого блоку. Таким чином, блок зміщується на половину своєї висот вгору. В результаті центр блоку виявляється по висоті суміщений з центром контейнера.
Далі всередині кнопок треба намалювати стрілку вліво і стрілку вправо. Використовуємо для цього псевдоелементи: after, і стрілки малюємо як дійсні символи Unicode.
Відцентрувати стрілку по висоті, використовуємо ще один прийом вертикального вирівнювання: задаємо висоту рядка рівній висоті контейнера (line-height: 80px).
Розібралися з тим, як відобразити кнопки. Тепер модифікуємо код слайдера з попередньої статті для використання з такими кнопками.
Окремі пари кнопок нам знадобляться для кожного кадру слайдера. У першому кадрі кнопка «Назад» активує останній кадр, а кнопка «Вперед» - другий кадр. У другому кадрі кнопка «Назад» активує перший кадр, а кнопка «Вперед» - третій кадр. І так далі. Виходить код такого вигляду:
З таблиць стилів від попереднього слайдера ми видаляємо все, що пов'язано зі старими кнопками і додаємо оформлення кнопок з розглянутого вище прикладу:
В результаті виходить ось такий слайдер:
Схід над островом
