Слайдер изображений с кнопками навигации

Привет, друзья. Хочу предложить вам слайдер для изображений с навигационными кнопками. Его можно применить как  для показа картинок с блога, так и для рекламных баннеров. Он отображает саму картинку (кликабельную), заголовок со ссылкой на нужную страницу и краткий анонс.

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

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

Предложенный ниже код устанавливается в гаджет HTML/JavaScript в нужное место блога.
В первом коде CSS можно подогнать стили под ваш дизай. Для начала я бы посоветовала вам скопировать последний код HTML (я отметила его наклонным шрифтом), чтобы внести свои изменения. Разберём их ниже.

<style type='text/css'>
#slide{height:auto}
#slidepager{width:auto;margin:0 auto;text-align:center;display:block!important}
#slidepager>span{display:inline-block;width:10px;height:10px;margin:10px 5px 0;background:rgba(0,0,0,.2);text-align:center;border-radius:100%;font-size:17px;text-decoration:none;transition:background .3s linear 0s;cursor:pointer}
#slidecontent{margin:0 auto;transition:opacity .3s linear 0s;color:#AAA;background:#fff;border:1px solid #dedede;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;position:relative;overflow:hidden;height:auto}
.slidepanel{width:100%;padding:10px 15px 15px;-moz-box-sizing:border-box;word-wrap:break-word;-webkit-box-sizing:border-box;box-sizing:border-box}
.slidepanel>h2{text-align:left;font-size:20px;font-weight:bold;line-height:1.2em;color:#333;margin:0 auto 10px;text-transform:capitalize;padding:0!important}
.slidepanel>p,.slidepanel>span{font-size:14px;font-weight:normal;line-height:1.2em;color:#777;margin:10px 0 0!important}
.slidepanel a{color:#333;text-decoration:none;font-weight:700;transition:all .4s ease-out}
#slide:hover .slidepanel a{color:#e8554e}
.slideimage{width:100%;height:150px;margin:0;padding:0;position:relative}
.slideimage img{width:100%;height:100%;margin-bottom:-4px}
.clear{clear:both}
.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
100%{-webkit-transform:none;transform:none}
}
</style>

<script type='text/javascript'>
//<![CDATA[
function _(e){return document.getElementById(e)}function pager(e){_("slidecontent").style.opacity=0;for(var n=0;n<ba.length;n++)ba[n].style.background="rgba(0,0,0,.2)";ba[e].style.background="rgba(0,0,0,.7)",setTimeout(function(){_("slidecontent").innerHTML=bca[e],_("slidecontent").style.opacity=1},300)}function bubbleSlide(){bi++,bi==ba.length&&(bi=0),pager(bi)}var ba,bi=0,intrvl;window.addEventListener("load",function(){ba=_("slidepager").children,intrvl=setInterval(bubbleSlide,7e3)});
//]]>
</script>

<div id='slide'>
  <div id='slidecontent'>
      <div class="slideimage"><a href="http://www.shpargalochki.ru/2017/08/vidzhet-poslednih-postov-blogger.html" title="виджет последних сообщение"><img alt="видже" height="150" src="https://3.bp.blogspot.com/-a9OLcf_FPJY/WYCGqQMjyzI/AAAAAAAAHgg/bYzkHsJ2kLIuOCBSIS2JilfmW_slcRsDQCLcBGAs/s200/%25D1%2581%25D0%25BB%25D1%2583%25D1%2587%25D0%25B0%25D0%25B9%25D0%25BD%25D1%258B%25D0%25B5.jpg" title="виджет последних сообщений" width="300"/></a></div><div class="slidepanel"><h2><a href="http://www.shpargalochki.ru/2017/08/vidzhet-poslednih-postov-blogger.html" title="виджет последних сообщений">Виджет последних сообщений</a></h2><p>Очередной виджет последние сообщения для блога. .</p></div><div class="clear"></div>
    <script>
      //<![CDATA[
      var bca = [
        '<div class="slideimage bounceInLeft"><a href="http://www.shpargalochki.ru/2017/08/vidzhet-poslednih-postov-blogger.html" title="виджет последних сообщений"><img alt="виджет" height="150" src="https://3.bp.blogspot.com/-a9OLcf_FPJY/WYCGqQMjyzI/AAAAAAAAHgg/bYzkHsJ2kLIuOCBSIS2JilfmW_slcRsDQCLcBGAs/s200/%25D1%2581%25D0%25BB%25D1%2583%25D1%2587%25D0%25B0%25D0%25B9%25D0%25BD%25D1%258B%25D0%25B5.jpg" title="виджет последних сообщений" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="http://www.shpargalochki.ru/2017/08/vidzhet-poslednih-postov-blogger.html" title="виджет последних сообщений">Виджет последних сообщенийц</a></h2><p>Очередной виджет последние сообщения для блога..</p></div><div class="clear"></div>',

        '<div class="slideimage bounceInLeft"><a href="(адрес страницы)" title="анимированная рамка"><img alt="рамка" height="150" src="ссылка на изображение" title="анимированная рамка" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="(адрес страницы" title="анимированная рамка">Заголовок</a></h2><p>Краткое описание</p></div><div class="clear"></div>',

         '<div class="slideimage bounceInLeft"><a href="(адрес страницы)" title="анимированная рамка"><img alt="рамка" height="150" src="ссылка на изображение" title="анимированная рамка" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="(адрес страницы" title="анимированная рамка">Заголовок</a></h2><p>Краткое описание</p></div><div class="clear"></div>',

          '<div class="slideimage bounceInLeft"><a href="(адрес страницы)" title="анимированная рамка"><img alt="рамка" height="150" src="ссылка на изображение" title="анимированная рамка" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="(адрес страницы" title="анимированная рамка">Заголовок</a></h2><p>Краткое описание</p></div><div class="clear"></div>',

          '<div class="slideimage bounceInLeft"><a href="(адрес страницы)" title="анимированная рамка"><img alt="рамка" height="150" src="ссылка на изображение" title="анимированная рамка" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="(адрес страницы" title="анимированная рамка">Заголовок</a></h2><p>Краткое описание</p></div><div class="clear"></div>',
      ];
      //]]>
    </script>
  </div>
  <div id='slidepager'>
    <span onclick='pager(0); clearInterval(intrvl);' style='background:rgba(0,0,0,.7);'></span>
    <span onclick='pager(1); clearInterval(intrvl);'></span>
    <span onclick='pager(2); clearInterval(intrvl);'></span>
    <span onclick='pager(3); clearInterval(intrvl);'></span>
    <span onclick='pager(4); clearInterval(intrvl);'></span>
  </div>
</div>

Обращаю ваше внимание, что в первых двух участках кода HTML, которые я выделила цветом все значения должны быть одинаковыми. То есть, 2 раза прописываем для первого слайда. ЭТО ВАЖНО.

http://www.shpargalochki.ru/2017/08/vidzhet-poslednih-postov-blogger.html  адрес страницы.

https://3.bp.blogspot.com/-a9OLcf_FPJY/WYCGqQMjyzI/AAAAAAAAHgg/bYzkHsJ2kLIuOCBSIS2JilfmW_slcRsDQCLcBGAs/s200/%25D1%2581%25D0%25BB%25D1%2583%25D1%2587%25D0%25B0%25D0%25B9%25D0%25BD%25D1%258B%25D0%25B5.jpg  URL (путь к картинке).

Виджет последних сообщенийц  заголовок слайда.

Очередной виджет последние сообщения для блога.  краткое описание.


Всего у нас получается 5 слайдов. Добавляйте в эти участки кода свои картинки. не забудьте прописать соответствующие title и alt к ним.

 '<div class="slideimage bounceInLeft"><a href="(адрес страницы)" title="анимированная рамка"><img alt="рамка" height="150" src="ссылка на изображение" title="анимированная рамка" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="(адрес страницы" title="анимированная рамка">Заголовок</a></h2><p>Краткое описание</p></div><div class="clear"></div>',

Высота самого слайдера auto;, размер картинки width="300" и height="150"

Вот такие несложные настройки у этого слайдера изображений. Будьте пожалуйста внимательны ко всем символам в коде.

Всем удачи и до встречи. 

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

Введите Ваш email