Лого SiteHere.ru

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

Слайдер на CSS

Слайдеры на CSS имеют некоторое преимущество перед слайдерами на Javascript. Одно из таких преимуществ — это скорость загрузки. Мало того что изображения для слайдеров используются больших размеров (если нет оптимизации под разные экраны), так еще и на загрузку скриптов тратится некоторое время. Но в статье Вы увидите только слайдеры на чистом CSS.

Вот что я нашел на сайте на тему слайдеров:

Если вы занимаетесь web-разработкой и есть желание сделать это профессией или перейти на следующий уровень, то посмотрите на эту школу и курс «Front-end разработчик» от Нетологии, и, в качестве альтернативы похожий курс от Skillbox «Front-end разработчик«. Особенное внимание уделите изучению преподавателей курса, от их зависит скорость вашего роста.

Как и в прошлых уроках, я рекомендую все примеры смотреть в браузере Chrome.



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

Слайдер на CSS, который использует для навигации по слайдам радиокнопки. Эти радиокнопки находятся под слайдеров. Также помимо радиокнопок навигация осуществляется с помощью стрелок слева и справа. Чтобы следить за тем, какое изображение сейчас отображать — используются псевдоклассы :checked.

CSS3 слайдер изображений


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

В отличие от прошлого слайдера на CSS, здесь вместо радиокнопок внизу расположены миниатюры всех изображений, что также бывает удобно при создании галереи изображений. Изображения сменяются со своеобразным эффектом: плавно исчезают при увеличении.

CSS3 слайдер с миниатюрами


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

А вот этот слайдер на CSS отлично подойдет для продающих страниц. Как правило, многие веб-разработчики при разработке лендингов (продающих страниц) размещают слайдер в самом начале, чтобы в первом экране (без прокрутки) посетитель сразу видел все выгоды, которые есть для него на этой странице. Помимо всего, этот слайдер является адаптивным, что также радует.

Галерея на CSS


4. Слайдер на CSS без ссылок

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

Слайдер на CSS без ссылок


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

Еще один адаптивный слайдер, управление которого основано на радиокнопках. Чтобы посмотреть как этот слайдер будет смотреться на разных устройствах — Вы можете либо самостоятельно изменять окно браузера, либо на странице со слайдером есть специальные иконки разных устройств, кликая на которые, Вы увидите будет смотреться слайдер на компьютере, планшете или на смартфоне.

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


*** БОНУСНЫЙ СЛАЙДЕР ***

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



Вывод

С помощью слайдеров можно красиво оформлять галереи изображений, размещая их более компактно, вставить слайдер в первый экран (часть страницы, которую видно без прокрутки) продающей страницы, чтобы сразу показать посетителю главные выгоды, которые он получит. Можно еще найти массу способ где и как можно применить слайдеры, но одно понятно точно — они несут пользу при правильном использовании.

Пункты, которые были рассмотрены в статье:

  1. CSS3 слайдер изображений
  2. CSS3 слайдер изображений с миниатюрами
  3. Галерея на CSS
  4. Слайдер на CSS без ссылок
  5. Адаптивный слайдер на CSS3
  6. *** БОНУСНЫЙ СЛАЙДЕР ***

Успехов!

С Уважением, Юрий Немец

13 комментариев к записи
  • Максим Рябухин

    css вообще мощный инструмент, если уметь им пользоваться. Но иногда разбавив его явой можно получить еще более впечатляющее зрелище.

     
    • Юрий

      Максим, совершенно верно! Связка CSS/CSS3+JS дает действительно классные результаты.

       
  • Елена

    Юрий, у Вас невероятно информативный сайт. Совершенно случайно к Вам попала о осталась навсегда. Огромнейшее Вам спасибо за очень простую и удобную подачу материала и его демонстрацию. Ведь так важно и читать и слушать Вас и тут же видеть результат(пример). Спасибо, спасибо большое. Роста Вам и узнаваемости 🙂

     
    • Юрий

      Спасибо, Елена! Вы правы в том, что нужно слушать, читать и видеть конечный результат, ведь только в этом случае складывается полная картина того, о чем написано в статье.

       
  • Amsterdam

    Пятый то как скачать? Где исходники?

     
    • Юрий

      Нажмите на странице CTRL+U. Там увидите файл стилей main.css и структуру слайдера. Страница с примером очень простая, поэтому легко можно найти необходимую часть кода.

       
  • Денис

    Добрый день, подскажите по 6 слайдеру: как добавить картинку. Все, вроде сделал, но упустил какую-то деталь — шестая картинка находится под первой, а не после 5-й =(

     
  • Алена

    Скажите, пожалуйста, можно ли сделать резиновую верстку во втором слайдере — чтобы ширина составляла 80% от родительского блока, высота верхней картинки была пропорциональной и отступ нижних картинок был не в пикселях, а зависел от высоты большой картинки?

     
    • Юрий Немец

      Добрый день, Алена!

      Да, это можно сделать во втором слайдере.

       
  • Алена

    А как? Как во втором модуле изменяется ширина картинок? 

    В css только в .slider прописана ширина… Как прописана ширина остальных картинок?

     
  • Алена

    Скажите, пожалуйста, нужно вставить два одинаковых слайдера (№2)  на одну страницу. Меняю названия всех class и id, первый слайдер работает нормально, а второй показывает только маленькие картинки, появляются кружки выбора, нет большой картинки. В чем причина?

     
  • Али

    Мнее тоже все понравилось, спасибо Юрий! Помогли с реальной проблемой, сайт сделан эффектно

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *