Слайдер над / под шапкой блога 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


21 комментарий:

  1. Привет, Вика. Очень интересно! Спасибо. В самом сообщении ведь тоже можно использовать?

    ОтветитьУдалить
    Ответы
    1. Люба, привет. Да, я пробовала и в сообщении. Работает. Ой, мне уже интересно, как ты сделаешь.

      Удалить
  2. Чёрт побери! Совершенно неисчерпаемый ящик.

    ОтветитьУдалить
  3. Семён, ага, сундук шпаргалок.

    ОтветитьУдалить
  4. красота какая! У меня над шапкой он не становится,но как вариант попробовала в слайдбаре.

    ОтветитьУдалить
    Ответы
    1. Infodar, интересное название, слайдбар.Но я поняла.

      Удалить
    2. я знада,что ты поймёшь,не знаю почему,но я его всегда про себя величаю

      Удалить
  5. Интересно, Виктория! Спасибо!

    ОтветитьУдалить
  6. Ирина, попробуй котиков своих поставить так в блоге по первому варианту.

    ОтветитьУдалить
  7. Спасибо, Вика, мне очень понравилось! Надо как-нибудь попробовать... Только у меня в последнее время что ни попробую - не работает, я и пробовать перестала... Может в коде где ошибка, не знаю причину...

    ОтветитьУдалить
  8. Елена, нужно на тестовом сначала играться. А там и причину понять.

    ОтветитьУдалить
    Ответы
    1. На тестовом, допустим, работает, а в основном нет... причину мне не дано понять... )))) Но я на этом не зацикливаюсь - получилось, это хорошо, нет так нет... Не принципиально.

      Удалить
  9. Елена, недавно обращалась одна подписчица. Она убрала кнопки плюсо. Проблемы вызывает скрипт «лайков» Pluso.. Погуглите про них. Вот хотя бы инфа http://webmasters.ru/forum/f31/informaciya-dlya-teh-kto-pol%60zuetsya-pluso-59452/Может в этом дело. А так у Вас фото много, нагрузка и без того большая.

    ОтветитьУдалить
    Ответы
    1. Спасибо, Вика! Кнопочки убрала, (вряд ли ими кто-нибудь пользуется) на досуге буду пробовать что-нибудь...

      Удалить
  10. вместо картинок возможно вставить коды от баннеров?

    ОтветитьУдалить
  11. Infodar, давно обратила внимание, что ты вообще не внимательно всё читаешь. В статье написано, чёрным по белому
    Если необходимо сделать изображение кликабельным пишем так
    Infodar

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

    ОтветитьУдалить
    Ответы
    1. О каких кодах баннеров ты говоришь.

      Удалить
  12. как сделать кликабельным я видела и знаю,когда картинки,я про баннеры,вместо картинок чтобы баннеры вставлять,я вставляю картинки,всё норм,вставляю баннеры-не двигаются

    ОтветитьУдалить
  13. пример не могу показать,в комментарии коды не вставляются

    ОтветитьУдалить
  14. <div id="linkslot_287790"><script src="https://linkslot.ru/bancode.php?id=287790" async></script></div>

    ОтветитьУдалить
  15. Ой....Давай уже на почту пиши. Какие скрипты ты мне тут показываешь. это чё такое
    <div id="linkslot_287790"><script src="https://linkslot.ru/bancode.php?id=287790" async></script></div>

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML