Анимированный слайдер на чистом CSS3

HTML

<div id="content-slider">
  <div id="content">

    <div id="content-inner-1">
      <div id="content-inner-2">
        <div id="content-inner-3">
          <div id="content-inner-4">
            <div id="content-inner-5">
              <div id="content-inner-6">
                <div id="content-inner">

                  <div class="slide">
                    <img src="i/test1.jpg" alt="slide1">
                    <div class="slide-info">
                      <h2>Страница 1</h2>
                      <p>Lorem ipsum dolor sit amet, consectur whatever blah</p>
                    </div>
                  </div>

                  <div class="slide">
                    <img src="i/test2.jpg" alt="slide2">
                    <div class="slide-info">
                      <h2>Страница 2</h2>
                      <p>Lorem ipsum dolor sit amet, consectur whatever blah</p>
                    </div>
                  </div>

                  <div class="slide">
                    <img src="i/test3.jpg" alt="slide3">
                    <div class="slide-info">
                      <h2>Страница 3</h2>
                      <p>Lorem ipsum dolor sit amet, consectur whatever blah</p>
                    </div>
                  </div>

                  <div class="slide">
                    <img src="i/test4.jpg" alt="slide4">
                    <div class="slide-info">
                      <h2>Страница 4</h2>
                      <p>Lorem ipsum dolor sit amet, consectur whatever blah</p>
                    </div>
                  </div>

                  <div class="slide">
                    <img src="i/test5.jpg" alt="slide5">
                    <div class="slide-info">
                      <h2>Страница 5</h2>
                      <p>Lorem ipsum dolor sit amet, consectur whatever blah</p>
                    </div>
                  </div>

                  <div class="slide">
                    <img src="i/test6.jpg" alt="slide6">
                    <div class="slide-info">
                      <h2>Страница 6</h2>
                      <p>Lorem ipsum dolor sit amet, consectur whatever blah</p>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <ul id="nav" class="list-unstyled">
    <li>
      <a href="#content-inner-1"></a>
    </li>
    <li>
      <a href="#content-inner-2"></a>
    </li>
    <li>
      <a href="#content-inner-3"></a>
    </li>
    <li>
      <a href="#content-inner-4"></a>
    </li>
    <li>
      <a href="#content-inner-5"></a>
    </li>
    <li>
      <a href="#content-inner-6"></a>
    </li>
  </ul>
</div>

Согласен, что выглядит страшно. Нет, очень страшно. Но помните, что это не будет самой семантической вещью на планете. Теперь позвольте мне объяснить.

У нас есть div#content-slider, который включает в себя все содержимое (слайды и навигацию). Мы просто устанавливаем для него свойства width и margin и просто забываем о нем. Также у нас есть два раздела: div#content и ul#nav. div#content содержит все наши страницы, а ul#nav является навигацией, которая позволяет нам получать доступ к разным страницам слайдера или просто прокручивать их.

Теперь, прямо внутри div#content, мы добавляем 6 вложенных дивов: начиная с "content-inner-1" до "content-inner-6". Эти 6 дивов делают все основную работу, как именно, я объясню в дальнейшем.

CSS

#content-slider {
  margin: 0 auto;
  width: 640px;
}
#content {
  height: 480px;
  width: 640px;
  box-shadow: 0 0 50px 10px #c9c9c9;
  overflow: hidden;
}
#content-inner {
  height: 480px;
  width:10000px;
  transition: all 400ms ease;
}

Как я уже сказал, все что мы сделали с div#content-slider это поместили его по центру страницы.

Стили для div#content очень важны. Мы установили ему "overflow: hidden" - это гарантирует, что слайды будут невидимыми, пока они не будут прокручены до видимой области.

Теперь div#content-inner, который содержит все слайды. Именно по этой причине он имеет ширину 10000px. Обычно, Javascript позволяет изменять и устанавливать правильную ширину, но в данном случае мы не используем Javascript и просто сделаем ее достаточно большой.

Слайды имеют фиксированную ширину и высоту, и располагаются друг за другом. Для этого используем правило float:left.

Теперь напишем некоторые общие стили, для блоков "div.slide", и "ul#nav".

.slide {
  height: 480px;
  width: 640px;
  float: left;
  position: relative;
}
.slide-info {
  background: rgba(0, 0, 0, .35);
  color: #fff;
  padding: 1rem 2rem;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.slide-info h2 {
  color: #fff;
  font-size: 1.25rem;
  margin: 0;
}
.slide-info p {
  font-size: 1rem;
  margin: 0;
}

Как вы можете видеть, это всего лишь несколько простых стилей, которые слегка стилизуют слайд и текст в нем.

Теперь добавим некоторые интересные CSS3-стили для кнопок.

ul#nav {
  margin: 1rem auto;
  display: table;
}

ul#nav > li {
  margin: 0 5px;
  background: #bababa;
  border-radius: 50%;
  float: left;
}
ul#nav > li:hover {
  box-shadow: inset 0 0 2px 2px #d4d4d4;
}
ul#nav > li:active {
  box-shadow: inset 0 0 2px 2px #7a7a7a;
}
ul#nav > li > a {
  height: 1rem;
  width: 1rem;
  display: block;
}

Мы сделали кнопки круглыми, и дабавили им падающие тени.

Теперь я объясню, как это все будет работать. Используя псевдо-селектор CSS3 :target, мы можем устанавливать стили элементов, которые находятся по ссылке. Например:

#example {
  visibility: hidden;
}
#example:target {
  visibility: visible;
}

Теперь, если мы были по адресу, такому как, например, http://www.example.com/index.html#example стили с :target выше, были бы применены. И в этом случае, div#example будет виден.

Используя это, мы можем имитировать функцию JavaScript click. Если пользователь нажимает на ссылку, указывающую на "http://www.example.com/index.html#example", то стиль будет применяться к блоку "example".

В нашем случае, мы будем использовать ":target", чтобы сделать наш контент-слайдер работающим. Когда пользователь нажимает на любую из шести кнопок в меню навигации, "content-inner" будет сдвигаться в соответствующее положение, точно также как и при использовании JavaScript.

Вот код позиционирования:

#content-inner-1:target #content-inner {
  margin-left: 0;
}
#content-inner-2:target #content-inner {
  margin-left: -640px;
}
#content-inner-3:target #content-inner {
  margin-left: -1280px;
}
#content-inner-4:target #content-inner {
  margin-left: -1920px;
}
#content-inner-5:target #content-inner {
  margin-left: -2560px;
}
#content-inner-6:target #content-inner {
  margin-left: -3200px;
}

Заключение

У нас есть 6 "content-inner-[number]" дивов, и каждый div соответствует странице. 6 страниц = 6 дивов.

div#content-inner является дочерним для каждого "content-inner-[number]" div-а, поэтому когда любой из шести "content-inner-[number]" вызывается, мы можем установить соответствующие стили для "content-inner".

Так как каждый слайд имеет ширину 640px, мы просто устанавливаем margin-left для div-a "content-inner" кратный 640.

Чтобы сделать ":target" стили рабочими, мы должны иметь ссылки, указывающие на них.

Для того чтобы действительно оживить "content-inner", мы создаем для него стандартную CSS3-анимацию.

Вот всё, мы имеем полностью функциональный, анимированный, хотя и не очень семантичный, слайдер.