О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Смена изображений CSS3 слайдер
  • Инструменты
  • Заработок
  • Раскрутка
03 июня 2016 . Антон Кулешов

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

Уже давненько я нечего не добавлял по теме слайдеров и вот, как раз недавно, наткнулся на очень интересное решение с красивыми переходами при смене картинок. Сегодняшний слайдер не будет использовать никаких библиотек, а только возможности смены изображений в CSS3, что делает его лёгким и быстрым.

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

Не вижу смысла пилить весь HTML в статью, поэтому добавлю код только для одного слайда:

<section class="cr-container">
  <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked />
 <label for="select-img-1" class="cr-label-img-1">1</label>

  <!-- Кнопки слайдера -->

  <div class="clr"></div>
   <div class="cr-bgimg">
      <div>
         <span>Slice 1 - Image 1</span>
          <span>Slice 1 - Image 2</span>
          <span>Slice 1 - Image 3</span>
          <span>Slice 1 - Image 4</span>
      </div>

        <!--
         HTML в который будет выводиться картинка
            и биться на несколько частей
        -->
  </div>
    <div class="cr-titles">
     <h3><span>Заголовок 1</span><span>Подробное описание 1</span></h3>

      <!-- Заголовки и описания слайдов -->
 </div>
</section>

Само изображение указывается в заднем фоне дива лежащего в блоке с классом cr-bgimg в стилях:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
   background-image: url(../img/slide1.jpg);
}

Изначально слайдер рассчитан на 4 изображения, но, я думаю, моему читателю не составит труда его расширить при необходимости. Главный плюс этого слайдера – отсутствие сторонних библиотек. Плавная смена изображений производится только средствами CSS. Так что, если вы не ориентируетесь на пользователей, которые не обновляют свой браузер, то это решение будет хорошим способом разукрасить страницу и сделать её более живой.

#Cлайдеры
8 770
Антон Кулешов
Слайдер на jQuery с эффектом занавеса Слайдер с красивыми эффектами - Coin Slider Слайд-шоу на заднем фоне сайта FlexSlider - адаптивный слайдер для сайта Адаптивный слайдер на jQuery
Комментарии не найдены

Всплывающие подсказки balloon CSS

Кнопки социальных сетей

Популярное
1 Пишем парсер контента на PHP2 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте3 Лучший способ прижать футер используя flexbox4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание