Слайдер над / под шапкой блога Blogger (2 варианта)

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

Вариант 1. 

Слайдер без подключения библиотеки jquery. Идёт плавная смена картинок. При наведении курсора на сам слайдер приостанавливается смена изображений, при клике на кнопку, которые вверху, тоже. При желании можно сделать каждую картинку кликабельной, с переходом на нужную страницу. Слайдер резиновый, подойдёт под любой экран. Готовый код рассчитан на 5 слайдов, но при необходимости можно добавить или удалить. 

Как он работает можно увидеть в этом редакторе. Скопируйте код и вставьте в поле. 

Код

<div id="odin">
<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/>
<img src="http://s3.fotokto.ru/photo/full/443/4437167.jpg" alt="природа южного урала"/>
<img src="http://rasfokus.ru/images/photos/medium/3d0d8cf8cdc2c83ea5b13d45e24225b1.jpg" alt="природа южного урала"/>
<img src="https://i08.fotocdn.net/s113/509da19195574f18/public_pin_l/2556954570.jpg" alt="природа южного урала"/>
<img src="http://s4.fotokto.ru/photo/full/563/5639963.jpg" alt="природа южного урала"/>

  <div>
    <button type="button" value="0">1</button>

    <button type="button" value="1">2</button>

    <button type="button" value="2">3</button>

    <button type="button" value="3">4</button>

    <button type="button" value="4">5</button>
      </div>
</div>
<style>
#odin {
  position: relative;
  max-width: 100%;  /* можно ограничить ширину в px  */
  max-height: 340px;  /* можно ограничить высоту в px  */
  overflow: hidden;
}
#odin img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  bottom: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  outline: 300px solid #fff;
}
#odin div {
  position: relative;
  height: 0;
  margin-bottom: 60%;
  z-index: 3;
}
#odin img:nth-of-type(1) {
  z-index: 2;
}
#odin button:nth-of-type(1) {
  opacity: 0.4;
}
</style>
<script>
window.requestAnimationFrame = (function () {
        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('odin'),
    img = f.getElementsByTagName('img'),
    button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, img, button, '4000', '1000');  // '2000' &#8212; скорость смены картинок, '1000' &#8212; скорость прозрачности
</script>

В строках, отмеченными жёлтым вставьте адреса ваших изображений.

Если необходимо сделать изображение кликабельным пишем так

 <a href="здесь адрес страницы, на которую будет осуществлён переход.">Горы<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/></a>

При дополнении картинки добавляем строку

<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/>

При этом необходимо добавить соответственно и нумерацию

<button type="button" value="5">6</button>

Остальные настройки я дала в комментариях в коде.

Вариант 2. 

Этот адаптивны слайдер с заголовком и описание картинок. Работает с подключением jquery. Я отметила первую строку красным цветом. Это и есть библиотека jquery. Скорее всего она уже подключена у вас в блоге. Тогда строку убрать нужно. Если нет, оставляйте код как есть.

Код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id="slider" class="slider">
<ol class="slider_indicators">
<li class="slider_indicator slider_indicator_active" data-slide-to="0"></li>
<li class="slider_indicator" data-slide-to="1"></li>
<li class="slider_indicator" data-slide-to="2"></li>
<li class="slider_indicator" data-slide-to="3"></li>
</ol>
<div class="slider_items">
<div class="slider_item slider_item_1 slider_item_active">
    <div class="slider_text">
        <h1>Природа Южного Урала</h1>
        <h2>Подзаголовок </h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
    </div>
    <img src="https://i08.fotocdn.net/s113/509da19195574f18/public_pin_l/2556954570.jpg" alt="slide1" />
</div>
<div class="slider_item slider_item_2">
<div class="slider_text">
        <h1>Заголовок слайда №2</h1>
        <h2>Подзаголовок h2</h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
    </div>
    <img src="http://rasfokus.ru/images/photos/medium/3d0d8cf8cdc2c83ea5b13d45e24225b1.jpg" alt="slide2" />
</div>
<div class="slider_item slider_item_3">
    <div class="slider_text">
        <h1>Заголовок слайда №3</h1>
        <h2>Подзаголовок h2</h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
    </div>
    <img src="http://s3.fotokto.ru/photo/full/443/4437167.jpg" alt="slide3" />
</div>
<div class="slider_item slider_item_4">
    <div class="slider_text">
        <h1>Заголовок слайда №4</h1>
        <h2>Подзаголовок h2</h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
        </div>
        <img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="slide4" /></div>
</div>

</div>
<style>
.slider {position:relative;}
.slider_items{position:relative;width:100%;overflow:hidden;max-height:500px;}
.slider_item{position:relative;display:none;width:100%;transition: transform 0.6s ease;backface-visibility: hidden;overflow:hidden;}
.slider_item_active,.slider_item_next,.slider_item_prev{display:block;}
.slider_item_next,.slider_item_prev{position: absolute;top:0;}
.slider_item_next.slider_item_left,
.slider_item_prev.slider_item_right{transform: translateX(0);}
.slider_item_next,
.slider_item_right.slider_item_active{transform: translateX(100%);}
.slider_item_prev,
.slider_item_left.slider_item_active{transform: translateX(-100%);}
.slider_control{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:49%;color:#fff;opacity:.5;}
.slider_control:hover,
.slider_control:focus{opacity:1;}
.slider_control_prev{left:0;}
.slider_control_next{right:0;}
.slider_control::before {content: '';height:80px;width:19px;position:absolute;display:inline-block;background:transparent no-repeat center center;background-size: 100% 100%;}


.slider_indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none;}
.slider_indicator{position: relative;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;border-radius:6px;}
.slider_indicator::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator_active {background-color:#f00;}
.slider_items img{display:inline-block;height:auto;width:100%;vertical-align:bottom;}
.slider_text{z-index:3;position:absolute;top:10%;left:50%;margin-left:-400px;max-width:400px;}
.slider h1,.slider h2,.slider p{color:#fff;text-shadow:0 0 3px #000,0 0 10px #333;}

@media (max-width:1300px){
.slider_control_prev{left:5%;width:100px;}
.slider_control_next{right:5%;width:100px;}
}

@media (max-width:1050px){
.slider_text{top:10%;left:50%;margin-left:-200px;max-width:400px;}
}

@media (max-width:720px){
.slider_items{max-height:300px;}
.slider_items img{width:auto;height:100%;}
.slider_control_prev{display:none;}
.slider_control_next{display:none;}
.slider_text{top:1%;left:4%;right:4%;margin-left:0px;max-width:100%;}
}</style>
<script>
jQuery(document).ready(function($){

'use strict';
var slider=function(e){
const ClassName = {INDICATOR_ACTIVE: 'slider_indicator_active',ITEM: 'slider_item',ITEM_LEFT: 'slider_item_left',ITEM_RIGHT: 'slider_item_right',ITEM_PREV: 'slider_item_prev',ITEM_NEXT: 'slider_item_next',ITEM_ACTIVE: 'slider_item_active'}
var d=!1,u=0,i={},v={},I={},f={selector:"",isCycling:!0,direction:"next",interval:5e3,pause:!0},r=function(s){var n;return v.forEach(function(e,t){e===s&&(n=t)}),n},l=function(e,t,s){var n,a,i=ClassName.ITEM_RIGHT,r=ClassName.ITEM_PREV,l=v[t],c=v[s],o=function(){l.classList.remove(ClassName.ITEM_ACTIVE),l.classList.remove(i),c.classList.remove(r),c.classList.remove(i),c.classList.add(ClassName.ITEM_ACTIVE),window.setTimeout(function(){f.isCycling&&(clearInterval(u),C()),d=!1,l.removeEventListener("transitionend",o)},700)};d||(d=!0,"next"===e&&(i=ClassName.ITEM_LEFT,r=ClassName.ITEM_NEXT),c.classList.add(r),n=t,a=s,I.length===v.length&&(I[n].classList.remove(ClassName.INDICATOR_ACTIVE),I[a].classList.add(ClassName.INDICATOR_ACTIVE)),window.setTimeout(function(){c.classList.add(i),l.classList.add(i),l.addEventListener("transitionend",o)},0))},a=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=v.length-1,a=0===s?n:s-1;"next"===e&&(a=s==n?0:s+1),l(e,s,a)},C=function(){f.isCycling&&(u=window.setInterval(function(){a(f.direction)},f.interval))},t=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=e.target.getAttribute("data-slide-to");if(e.target.hasAttribute("data-slide-to")||e.target.classList.contains("slider_control"))if(e.target.hasAttribute("data-slide-to")){if(s===n)return;l(s<n?"next":"prev",s,n)}else e.preventDefault(),a(e.target.classList.contains("slider_control_next")?"next":"prev")};for(var s in e)s in f&&(f[s]=e[s]);return i="string"==typeof f.selector?document.querySelector(f.selector):f.selector,v=i.querySelectorAll("."+ClassName.ITEM),I=i.querySelectorAll("[data-slide-to]"),C(),i.addEventListener("click",t),f.pause&&f.isCycling&&(i.addEventListener("mouseenter",function(e){clearInterval(u)}),i.addEventListener("mouseleave",function(e){clearInterval(u),C()})),{next:function(){a("next")},prev:function(){a("prev")},stop:function(){clearInterval(u)},cycle:function(){clearInterval(u),C()}}}({
selector:".slider",
isCycling:true,
direction:"next",
interval:2000,
pause:false
});

});
</script>

Так же меняйте адреса картинок на свои. Пишите нужный текст в заголовках и описании.
Для добавления, опять же прописываем дополнительные участки в коде HTML.

<div class="slider_item slider_item_5">
    <div class="slider_text">
        <h1>Заголовок слайда №5</h1>
        <h2>Подзаголовок h2</h2>
        <p>Здесь будет анонс или краткое описание изображения</p>
        </div>
        <img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="slide5" /></div>
</div>

И в списке ol так же добавим

<li class="slider_indicator" data-slide-to="4"></li>

Тут нужно понять, что первый индикатор имеет дополнительный класс slider_indicator_active и порядковый номер начинается с - 0, не с единицы.

direction:"next",  направление смены слайдов. Вместо next можно написать prev будет в другую сторону
pause:false  остановка слайдера, если навести на него курсор. В данном случаи - отключено. Чтобы включить нужно написать true.
interval:2000,  время смены слайда

Каждый из кодов устанавливайте в гаджет  HTML/Java script и перемещайте в нужное место макета блога.

Посмотрите, умудрилась установить оба слайдера на тестовом блоге

Демонстрация 

В заключении хочу оговориться. Оба кода вполне могут работать и на страницах блога. Попробуйте. Но тут придётся играться с разными значениями. Да и такие слайдеры очень красиво смотрятся  по всей ширине экрана. Поэтому и предложила варианты над/под шапкой блога. 

Всем терпения, здоровья. Если возникнут вопросы, пишите в комментариях.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email