Слайдери на чистому css + бонусний слайдер

Слайдери на CSS мають деяку перевагу перед слайдерами на javascript. Одне з таких переваг - це швидкість завантаження. Мало того що зображення для слайдерів використовуються великих розмірів (якщо немає оптимізації під різні екрани), так ще й на завантаження скриптів витрачається деякий час. Але в статті Ви побачите тільки слайдери на чистому CSS.

Ось що я знайшов на сайті: назад слайдеров:

• Вертикальний слайдер за допомогою jQuery і CSS переходами
• Цікавий слайдер на jQuery
• Розсувний слайдер тільки на CSS3

Як і в минулих уроках, я рекомендую все приклади дивитися в браузері Chrome.

1. CSS3 слайдер зображень

Слайдер на CSS, який використовує для навігації по слайдах радиокнопки. Ці радиокнопки знаходяться під слайдеров. Також крім радіокнопок навігація здійснюється за допомогою стрілок ліворуч і праворуч. Щоб стежити за тим, яке зображення зараз відображати - використовуються псевдокласи : checked.

2. CSS3 слайдер зображень зі слайдами

На відміну від минулого слайдера на CSS, тут замість радіокнопок внизу розташовані мініатюри всіх зображень, що також буває зручно при створенні галереї зображень. Зображення змінюються зі своєрідним ефектом: плавно зникають при збільшенні.

3. Галерея на CSS

А ось цей слайдер на CSS відмінно підійде для продають сторінок. Як правило, багато веб-розробники при розробці Лендінзі (продають сторінок) розміщують слайдер на самому початку, щоб в першому екрані (без прокрутки) відвідувач відразу бачив все вигоди, які є для нього на цій сторінці. Крім усього, цей слайдер є адаптивним, що також радує.

4. Слайдер на CSS без посилань

Відразу хочу зауважити що цей слайдер не використовує посилань! За замовчуванням крім головного зображення (слайд) видно ще 2 слайди. Вони розташовані позаду основного. Зміна слайдів відбувається в красивому режимі: спочатку розсуваються два слайда і по центру стає той слайд, який потім стане головним. Потім слайд збільшується і поміщається попереду інших.

5. Адаптивний слайдер на CSS3

Ще один адаптивний слайдер, управління якого заснована на радіокнопку. Щоб подивитися як цей слайдер буде виглядати на різних пристроях - Ви можете або самостійно змінювати вікно браузера, або на сторінці зі слайдером є спеціальні іконки різних пристроїв, клікаючи на які, Ви побачите буде виглядати слайдер на комп`ютері, планшеті або на смартфоні.

*** бонусних СЛАЙДЕР ***

Крім всіх слайдерів, які представлені вище, я хочу порадувати Вас ще одним. Цей слайдер відмінно підійде для створення галереї зображень. Словами не поясниш те що він робить, тому краще дивіться всі на відео:

завантажити вихідні

висновок

За допомогою слайдерів можна красиво оформляти галереї зображень, розміщуючи їх більш компактно, вставити слайдер в перший екран (Частина сторінки, яку видно без прокручування) продає сторінки, щоб відразу показати відвідувачеві головні вигоди, які він отримає. Можна ще знайти масу спосіб де і як можна застосувати слайдери, але одне зрозуміло точно - вони несуть користь при правильному використанні.

Пункти, які були розглянуті в статті:

1. CSS3 слайдер зображень
2. CSS3 слайдер зображень зі слайдами
3. Галерея на CSS
4. Слайдер на CSS без посилань
5. Адаптивний слайдер на CSS3
6. *** бонусних СЛАЙДЕР ***

Успіхів!

З повагою, Юрій Німець