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

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

Красивые изображения на Джоанна Kustra и они на условиях лицензии Attribution-Noncommercial 3.0 Unported Creative Commons License .

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

Пожалуйста, обратите внимание: результатом этого урока будет работать только по назначению в браузерах, поддерживающих CSS анимации.

Что бы не объяснять каждый элемент кода, что к чему относится я предлагаю вам сразу перейти к установке! Знающие люди могут сами разобраться

Установка: 

Первый вариант!

Этот код вставляем в head и /head:

Code
<link rel="stylesheet" type="text/css" href="/css/demo.css" />
  <link rel="stylesheet" type="text/css" href="/css/style1.css" />


Это ставим туда, где будет наш слайдер:

Code
<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>
   
  <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
  <label for="select-img-2" class="cr-label-img-2">2</label>
   
  <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
  <label for="select-img-3" class="cr-label-img-3">3</label>
   
  <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
  <label for="select-img-4" class="cr-label-img-4">4</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>
  <div>
  <span>Slice 2 - Image 1</span>
  <span>Slice 2 - Image 2</span>
  <span>Slice 2 - Image 3</span>
  <span>Slice 2 - Image 4</span>
  </div>
  <div>
  <span>Slice 3 - Image 1</span>
  <span>Slice 3 - Image 2</span>
  <span>Slice 3 - Image 3</span>
  <span>Slice 3 - Image 4</span>
  </div>
  <div>
  <span>Slice 4 - Image 1</span>
  <span>Slice 4 - Image 2</span>
  <span>Slice 4 - Image 3</span>
  <span>Slice 4 - Image 4</span>
  </div>
  </div>
  <div class="cr-titles">
  <h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
  <h3><span>Adventure</span><span>Where the fun begins</span></h3>
  <h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
  <h3><span>Serenity</span><span>When silence touches nature</span></h3>
  </div>
  </section>


Второй вариант!

Вставляем в head и /head:

Code
<link rel="stylesheet" type="text/css" href="/css/demo.css" />
  <link rel="stylesheet" type="text/css" href="/css/style2.css" />


Ставим туда, где будет наше меню :

Code
<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>
   
  <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
  <label for="select-img-2" class="cr-label-img-2">2</label>
   
  <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
  <label for="select-img-3" class="cr-label-img-3">3</label>
   
  <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
  <label for="select-img-4" class="cr-label-img-4">4</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>
  <div>
  <span>Slice 2 - Image 1</span>
  <span>Slice 2 - Image 2</span>
  <span>Slice 2 - Image 3</span>
  <span>Slice 2 - Image 4</span>
  </div>
  <div>
  <span>Slice 3 - Image 1</span>
  <span>Slice 3 - Image 2</span>
  <span>Slice 3 - Image 3</span>
  <span>Slice 3 - Image 4</span>
  </div>
  <div>
  <span>Slice 4 - Image 1</span>
  <span>Slice 4 - Image 2</span>
  <span>Slice 4 - Image 3</span>
  <span>Slice 4 - Image 4</span>
  </div>
  </div>
  <div class="cr-titles">
  <h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
  <h3><span>Adventure</span><span>Where the fun begins</span></h3>
  <h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
  <h3><span>Serenity</span><span>When silence touches nature</span></h3>
  </div>
  </section>


Третий вариант!

Вставляем между head и /head:

Code
<link rel="stylesheet" type="text/css" href="/css/demo.css" />
  <link rel="stylesheet" type="text/css" href="/css/style3.css" />


Наш слайдер:

Code
<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>
   
  <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
  <label for="select-img-2" class="cr-label-img-2">2</label>
   
  <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
  <label for="select-img-3" class="cr-label-img-3">3</label>
   
  <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
  <label for="select-img-4" class="cr-label-img-4">4</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>
  <div>
  <span>Slice 2 - Image 1</span>
  <span>Slice 2 - Image 2</span>
  <span>Slice 2 - Image 3</span>
  <span>Slice 2 - Image 4</span>
  </div>
  <div>
  <span>Slice 3 - Image 1</span>
  <span>Slice 3 - Image 2</span>
  <span>Slice 3 - Image 3</span>
  <span>Slice 3 - Image 4</span>
  </div>
  <div>
  <span>Slice 4 - Image 1</span>
  <span>Slice 4 - Image 2</span>
  <span>Slice 4 - Image 3</span>
  <span>Slice 4 - Image 4</span>
  </div>
  </div>
  <div class="cr-titles">
  <h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
  <h3><span>Adventure</span><span>Where the fun begins</span></h3>
  <h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
  <h3><span>Serenity</span><span>When silence touches nature</span></h3>
  </div>
  </section>


Четвертый вариант!

Ставим между head и /head :

Code
<link rel="stylesheet" type="text/css" href="/css/demo.css" />
  <link rel="stylesheet" type="text/css" href="/css/style4.css" />


Ставим там, где хотите видеть наш слайдер:

Code
<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>
   
  <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
  <label for="select-img-2" class="cr-label-img-2">2</label>
   
  <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
  <label for="select-img-3" class="cr-label-img-3">3</label>
   
  <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
  <label for="select-img-4" class="cr-label-img-4">4</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>
  <div>
  <span>Slice 2 - Image 1</span>
  <span>Slice 2 - Image 2</span>
  <span>Slice 2 - Image 3</span>
  <span>Slice 2 - Image 4</span>
  </div>
  <div>
  <span>Slice 3 - Image 1</span>
  <span>Slice 3 - Image 2</span>
  <span>Slice 3 - Image 3</span>
  <span>Slice 3 - Image 4</span>
  </div>
  <div>
  <span>Slice 4 - Image 1</span>
  <span>Slice 4 - Image 2</span>
  <span>Slice 4 - Image 3</span>
  <span>Slice 4 - Image 4</span>
  </div>
  </div>
  <div class="cr-titles">
  <h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
  <h3><span>Adventure</span><span>Where the fun begins</span></h3>
  <h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
  <h3><span>Serenity</span><span>When silence touches nature</span></h3>
  </div>
  </section>


Из прикрепленного архива заливаем файлы в соответствующие папки css и images

P.S. Изменить ссылки на изображения можно в файле style.css

  • FalleN

  • 5003

  • 1

  • 231

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!