Слайдер для сайта | JavaScript (без jQuery)

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

Карусель изображений (возможности, код)

1. плавная смена фото,
2. подстраивается под любой экран монитора (не адаптивный, а резиновый, что лучше),
3. нет нареканий с точки зрения SEO: изображение поисковые роботы видят, alt прописан,
4. удобен для пользователей (юзабилити):
   • при наведении на слайдер смена картинок приостанавливается и возобновляется только когда курсор мышки выведен за периметр слайдшоу,
   • при клике по кнопке выбора фотографии, прекращается автоматическая смена рисунков,
   • выделен активный (текущий) пункт, легко сориентироваться как найти нужное изображение,
   • обозначено общее количество картинок,
   • не перегружен дополнительными элементами: миниатюрами, таймером до смены слайда, значком паузы,
5. простой и легкий код.

Код слайдшоу

<!-- HTML -->
<div id="raz">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4lfNB_CB06WlmE0VPlHXbfZ5U-KFq1aqqIBxzmMv5ARkYPp3loFRWrj4Y1vr_9dUK4rEHph25_nQOtJDnqTdftoUQJ82r1q_2o8YWhmhImRiqu0GMvuZE88aQ6xIKUsvT1BfVL0LGsi3W/s0/obeziana.jpg" alt="Орангутан"/>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglO20y2R9Qh1YZP5vpj8e5zXxG37WzmCpEA6E_OMOyaJ2z7yrRZKqzObdgL510MGnXWD6hsKrhDWhbx9o4Xi6p20u4IisfeTtbHqkoIh6Qzx3k0abH66JPM9-667YmtBpbFQjayPSMTg1v/s0/pes.jpg" alt="Пёс"/>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJKwY45rj1mfi3I3ZJH0sqEcmFQcwUaYj7f8q1BuqBw5kUxVSEYnzeQnA571feEfvXoyTsk7ZGXevQ38IcPitAA4ulJwNbpnhyphenhyphenXf2TUoJoztqqoewKBq7aqaX6o05Nu-p-jOIiZ5zs0No-/s600/mishki.jpg" alt="Мишки"/>
  <div>
    <button type="button" value="0">1</button>
    <button type="button" value="1">2</button>
    <button type="button" value="2">3</button>
  </div>
</div>

<style>
#raz {
  position: relative;
  max-width: 100%;  /* можно ограничить по ширине в любых единицах, в т.ч. px (необязательно) */
  max-height: 400px;  /* можно ограничить по высоте в любых единицах, в т.ч. px (необязательно) */
  overflow: hidden;  /* удалить, если нет max-width, max-height и outline у img */
}
#raz img {
  position: absolute;
  top: 0;
  left: 0;

  /* Версия 1: абзац для того, чтобы изображение было растянуто во весь слайдер */
  height: 100%;
  width: 100%;

  /* Версия 2: абзац для того, чтобы изображение сохранило свои пропорции и было по середине области слайдера. То есть нужно выбрать одну из версий в img */
  bottom: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  outline: 300px solid #fff; /* для того, чтобы пропорциональные нижние картинки не были видны (необязательно) */

}
#raz div {
  position: relative;
  height: 0;
  margin-bottom: 60%; /* процент от ширины (тут есть калькулятор) */
  z-index: 3;
}
#raz img:nth-of-type(1) {
  z-index: 2;
}
#raz button:nth-of-type(1) {
  opacity: 0.4;
}
</style>

<script>
window.requestAnimationFrame = (function () { // для поддержки requestAnimationFrame всеми браузерами
        return window.requestAnimationFrame ||
               function (callback) {
                   return window.setTimeout(callback, 1000 / 60);
               };
})();
// функция слайдера
function slider(f, img, button, V, Vo) {
  var iii = 0,
      start = null,
      clear = 0;
  function step(time) {
    if (start === null) start = time;
    var progress = time - start;
    if (progress > V) {
      start = null;
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
        button[i].style.opacity = "1";
      }
      img[iii].style.zIndex = "1";
      iii = ((iii != (img.length - 1)) ? (iii + 1) : 0);
      img[iii].style.zIndex = "2";
      img[iii].style.opacity = "0";
      button[iii].style.opacity = ".4";
    } else if(img[iii].style.opacity != "") {
      img[iii].style.opacity = ((progress/Vo < 1) ? (progress/Vo) : 1);
    }
    if(clear != "0" && progress > Vo) {} else {requestAnimationFrame(step);}
  }
  requestAnimationFrame(step);
  f.onmouseenter = function() { if(clear == "0") clear = "1"; }  // при наведении на слайдер
  f.onmouseleave = function() { if(clear == "1") {clear = "0"; requestAnimationFrame(step);} }  // курсор убран со слайдера
  for (var j=0; j<button.length; j++) {  // при нажатии кнопок
    button[j].onclick = function() {
      clear = "2";
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
      }
      img[this.value].style.zIndex = "2";
      img[this.value].style.opacity = "1";
      for (var k=0; k<button.length; k++) {
        button[k].style.opacity = ((button[k] == this) ? '.4' : '1');
      }
    }
  }
}
// вызов функции слайдера
var f = document.getElementById('raz'),
    img = f.getElementsByTagName('img'),
    button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, img, button, '5000', '1000');  // '5000' — скорость смены картинок, '1000' — скорость прозрачности
</script>

Слайдер контента

Простая фотогалерея для сайта Слайдер ссылок: кнопки прокрутки на CSS Карусель изображений с миниатюрами на CSS

1. всё то же самое, только происходит смена не картинок, а тега <a>, то есть присутствует поддержка ссылок. Рекомендуется от 3 до 7 слайдов, желательно с информацией о скидках, акциях, конкурсах. Если это важный элемент навигации, например, большой слайдер в шапке сайта, то следует при внедрении следить за CTR или изменением конверсии, так как по нему кликают мало. Сбербанк, скажем, делает кнопку "Узнать больше".

Код слайдшоу

<!-- HTML -->
<div id="dva">
  <a href="#1" id="dvaF"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4lfNB_CB06WlmE0VPlHXbfZ5U-KFq1aqqIBxzmMv5ARkYPp3loFRWrj4Y1vr_9dUK4rEHph25_nQOtJDnqTdftoUQJ82r1q_2o8YWhmhImRiqu0GMvuZE88aQ6xIKUsvT1BfVL0LGsi3W/s0/obeziana.jpg" alt="Орангутан"/><strong>Заголовок 1</strong></a>
  <a href="#2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglO20y2R9Qh1YZP5vpj8e5zXxG37WzmCpEA6E_OMOyaJ2z7yrRZKqzObdgL510MGnXWD6hsKrhDWhbx9o4Xi6p20u4IisfeTtbHqkoIh6Qzx3k0abH66JPM9-667YmtBpbFQjayPSMTg1v/s0/pes.jpg" alt="Пёс"/><strong>Заголовок 2</strong></a>
  <a href="#3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJKwY45rj1mfi3I3ZJH0sqEcmFQcwUaYj7f8q1BuqBw5kUxVSEYnzeQnA571feEfvXoyTsk7ZGXevQ38IcPitAA4ulJwNbpnhyphenhyphenXf2TUoJoztqqoewKBq7aqaX6o05Nu-p-jOIiZ5zs0No-/s600/mishki.jpg" alt="Мишки"/><strong>Заголовок 3</strong></a>
  <div>
    <button type="button" value="0"></button>
    <button type="button" value="1"></button>
    <button type="button" value="2"></button>
  </div>
</div>

<style>
#dva,
#dva #dvaF {  /* все картинки будут той же высоты, что первая */
  position: relative;
  height: auto;
  z-index: 2;
}
#dva a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#dva img {
  /* можно прописать max-width и max-height */
  display: block;
  height: 100%;
  width: 100%;
}
#dva strong {  /* стиль текста, его помещать не обязательно строго снизу */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96%;
  padding: 2%;
  background: rgba(255,255,255,.8);
}
#dva div {  /* расположение кнопок */
  position: absolute;
  top: 0;
  right: 1em;
  z-index: 3;
}
#dva button {  /* стиль кнопок */
  height: .8em;
  width: .8em;
  padding: 0;
  border: none;
  border-radius: 100%;
}
#dva button:nth-of-type(1) {
  opacity: 0.4;
}
</style>

<script>
  // скрипт тот же, только вызов функции изменить:
  var f = document.getElementById('dva'),
    a = f.getElementsByTagName('a'),
    button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
  slider(f, a, button, '5000', '1000');
</script>

http://wordstat.yandex.ru/#!/?words=%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80 http://wordstat.yandex.ru/#!/?words=%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D1%88%D0%BE%D1%83%20%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82