Автоматический слайдер | CSS

• CSS прокрутка
• Галерея изображений HTML
• Меню вкладками на CSS
• Lightbox на CSS

Плюсы:

1. картинки, видео-ролики, таблицы и другие элементы автоматически сменяют друг друга;
2. при наведении курсора мышки, автоматическое перелистывание останавливается, после отведения - возобновляется;
3. кнопки-точки позволяют понять какой именно по счёту идёт элемент, поскольку динамически меняют свой цвет;
4. после нажатия на кнопку-точку (или цифру), автоматическое переключение прекращается. Его можно восстановить после обновления страницы;
5. сделан только на CSS (без JavaScript);
6. слайдер поддерживается всеми последними версиями браузеров. Свойство CSS animation не поддерживается Internet Explorer, поэтому его пользователи могут воспользоваться лишь "ручным" вариантом. Для Google Chrome нужно прописывать префикс -webkit-.
7. возможны, как минимум, два вида анимации (посмотрите, как перелистывается пара кадров) вариант1вариант2;
8. адаптирован под разрешение экрана монитора;
9. высота слайдера меняется в зависимости от того, какой пункт в данный момент активен. Если убрать max-height из кода, то высота слайдера будет равна высоте самого высокого элемента;
10. ширина может быть не более указанной, но это не мешает элементу быть меньше заданного значения.

Минусы:

1. не работает в большинстве устаревших версиях браузеров и на мобильных устройствах.

• ● ● ● ● ●
• 
• 

• <input id="tab1" name="tab" type="radio">
  <input id="tab2" name="tab" type="radio">
  <input id="tab3" name="tab" type="radio">
  <input id="tab4" name="tab" type="radio">
  <input id="tab5" name="tab" type="radio">
  
  <ul class="slider">
  <li><label for="tab1">●</label>
  <label for="tab2">●</label>
  <label for="tab3">●</label>
  <label for="tab4">●</label>
  <label for="tab5">●</label>
  <li> <!-- ваш код -->
  <li> <!-- ваш код -->
  <li> <!-- ваш код -->
  <li> <!-- ваш код -->
  <li> <!-- ваш код -->
  </ul>

• .widget .post-body ul {padding: 0;}  /* только для пользователей Blogger */ 
  
  input[name="tab"] {display: none;}
  
  .slider {
   position: relative;
   margin: 0 auto; max-width: 70%;
   overflow: hidden; white-space: nowrap; word-wrap: normal;}
  
  .slider li:nth-child(1) {
   position: absolute; right: 0; bottom: 0; z-index: 2;
   list-style: none; padding: 0 1em; background: rgba(255, 255, 255, .9);}
  
  .slider li:nth-child(1) label {
   animation-name: play0;
   animation-duration: 40s;
   animation-timing-function: linearsteps(5);
   animation-iteration-count: infinite;}
  label[for="tab2"] {animation-delay: 8s;}
  label[for="tab3"] {animation-delay: 16s;}
  label[for="tab4"] {animation-delay: 24s;}
  label[for="tab5"] {animation-delay: 32s;}
  
  .slider li:nth-child(n+2) {
   position: relative; display: inline-block;
   width: 100%; max-height: 0;
   text-align: center; vertical-align: top; background: #fff;
   animation-name: play, play1;
   animation-duration: 40s;
   animation-timing-function: linearsteps(5);
   animation-iteration-count: infinite;}
  .slider li:nth-child(2) {max-height: 500em;}
  .slider li:nth-child(3) {animation-delay: 0s, 8s;}
  .slider li:nth-child(4) {animation-delay: 0s, 16s;}
  .slider li:nth-child(5) {animation-delay: 0s, 24s;}
  .slider li:nth-child(6) {animation-delay: 0s, 32s;}
  
  input[name="tab"]:checked ~ .slider li:nth-child(2) {max-height: 0;}
  #tab1:checked ~ .slider li:nth-child(2) {max-height: 500em;}
  #tab2:checked ~ .slider li:nth-child(3) {left: -100%; max-height: 500em;}
  #tab3:checked ~ .slider li:nth-child(4) {left: -200%; max-height: 500em;}
  #tab4:checked ~ .slider li:nth-child(5) {left: -300%; max-height: 500em;}
  #tab5:checked ~ .slider li:nth-child(6) {left: -400%; max-height: 500em;}
  
  .slider label[for="tab1"],
  #tab1:checked ~ .slider label[for="tab1"],
  #tab2:checked ~ .slider label[for="tab2"],
  #tab3:checked ~ .slider label[for="tab3"],
  #tab4:checked ~ .slider label[for="tab4"],
  #tab5:checked ~ .slider label[for="tab5"] {color: red;}
  
  .slider label, input[name="tab"]:checked ~ .slider label[for="tab1"] {color: #000;}
  
  .slider img {
   max-width: 100%;
   padding: 0; margin: 0;
   box-shadow: none; border: none;}
  
  .slider:hover li, .slider:hover li label {animation-play-state:paused;}
  input[name="tab"]:checked ~ .slider li label,
  input[name="tab"]:checked ~ .slider li {animation: none;}
  
  @keyframes play1 { 
   0%, 100% { max-height: 500em; }
   22%, 99% { max-height: 0; }
  }
  @keyframes play {
   0%, 20%, 100% { left: 0; } 
   21%, 40% { left: -100%; }
   41%, 60% { left: -200%; }
   61%, 80% { left: -300%; }
   81%, 99% { left: -400%; }
  }
  @keyframes play0 { 
   21%, 100% { color: #000; }
   0%, 20% { color: red; }
  }@keyframes play1 { 
   0% { max-height: 500em; opacity: 0; }
   1%, 19% { opacity: 1; }
   20%, 100% { max-height: 0; opacity: 0; }
  }
  @keyframes play {
   0% { left: 0; } 
   100% { left: -500%; }
  }
  @keyframes play0 { 
   0% { color: red; }
   20%, 100% { color: #000; }
  }