Ось що я знайшов на сайті на тему слайдеров:
Як і в минулих уроках, я рекомендую все приклади дивитися в браузері Chrome.
1. CSS3 слайдер зображень
Слайдер на CSS, який використовує для навігації по слайдах радиокнопки. Ці радиокнопки знаходяться під слайдеров. Також крім радіокнопок навігація здійснюється за допомогою стрілок ліворуч і праворуч. Щоб стежити за тим, яке зображення зараз відображати - використовуються псевдокласи: checked.
2. CSS3 слайдер зображень зі слайдами
На відміну від минулого слайдера на CSS, тут замість радіокнопок внизу розташовані мініатюри всіх зображень, що також буває зручно при створенні галереї зображень. Зображення змінюються зі своєрідним ефектом: плавно зникають при збільшенні.
3. Галерея на CSS
А ось цей слайдер на CSS відмінно підійде для продають сторінок. Як правило, багато веб-розробники при розробці Лендінзі (продають сторінок) розміщують слайдер на самому початку, щоб в першому екрані (без прокрутки) відвідувач відразу бачив все вигоди, які є для нього на цій сторінці. Крім усього, цей слайдер є адаптивним, що також радує.
4. Слайдер на CSS без посилань
Відразу хочу зауважити що цей слайдер не використовує посилань! За замовчуванням крім головного зображення (слайд) видно ще 2 слайди. Вони розташовані позаду основного. Зміна слайдів відбувається в красивому режимі: спочатку розсуваються два слайди і по центру стає той слайд, який потім стане головним. Потім слайд збільшується і поміщається попереду інших.
5. Адаптивний слайдер на CSS3
*** бонусних СЛАЙДЕР ***
За допомогою слайдерів можна красиво оформляти галереї зображень, розміщуючи їх більш компактно, вставити слайдер в перший екран (частина сторінки, яку видно без прокручування) продає сторінки, щоб відразу показати відвідувачеві головні вигоди, які він отримає. Можна ще знайти масу спосіб де і як можна застосувати слайдери, але одне зрозуміло точно - вони несуть користь при правильному використанні.
Пункти, які були розглянуті в статті: