Слайдеры для Блоггер

Искала интересные слайдеры, которые легко, без проблем устанавливаются в статью. В интернете их довольно много. Решила показать интересные вам.

Слайдер 1

Посмотрите слайдер в тестовом блоге. А картинку можно посмотреть ниже.

Слайдер больше подходит для вертикальных картинок.

Устанавливаем код в статью в редакторе в режиме XTML.

Код:

<link rel="stylesheet" href="https://cdn.rawgit.com/mmnauman/ABTSlider/467e7c54/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<div class="sliderWrap">
<div class="slider">
<div id="prev" class='prev prevSection navigate'>
<span>‹</span>
</div>
<div id='slidesContainer' class='slidesWrap'>
<div class="slide active">
<img src="фото" alt="описание" title='1'>
</div>
<div class="slide">
<img src="фото" alt="описание" title='2'>
</div>
<div class="slide">
<img src="фото" alt="описание" title='3'>
</div>
<div class="slide">
<img src="фото" alt="описание" title='4'>
</div>
</div>
<div id="next" class='next nextSection navigate'>
<span>›</span>
</div>
</div>
</div>
<script src='https://cdn.rawgit.com/mmnauman/ABTSlider/467e7c54/helperFunctions.js'></script>
<script
src='https://rawcdn.githack.com/mmnauman/allbloggertricks.com-slider/3c9b5226f0895d7386dd9b9a440c878b04408204/script.js'></script>

Красным выделила место, куда нужно вставить ссылки на ваши фото.

Зелёным - alt - описание

Синим - title - описание

Если нужно добавить больше фото, то в код добавьте:

<div class="slide">
<img src="Your-image-url-here" alt="Image" title="ImageName">
</div>

И удаляйте этот же отрезок в коде, если нужно меньше фотографий.

Слайдер 2

Слайдер для 5 картинок. Здесь лучше выглядят горизонтальные картинки.

Код:

<style type="text/css">
#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto 40px;
}

#slider {
width: 500px;
height: 306px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ2A6N0FjMauJTG4t87KQXufbo-pORH22bab-QWfJmk7rPI7uq3ZgautQfoTEiiOYG7RhPO_oRpUWNow8hRDIJGMTKsRgxVi2c-uHINpjdQV5y8DEAPXg0JSKKti1U_ifRuGF0GC3Y0KxV/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
-webkit-box-shadow: 0px 1px 5px #999999;
-moz-box-shadow: 0px 1px 5px #999999;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg,
div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 15px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 320px;
left: 280px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhguqcAhcLngdU3MeuRrXRWMRAZxRGwCCZ4O9iOP_15pytdvkkFPeHUJyPhALxMKbLBUygrhEiYTPICyZXfj-ICTofeDQEXFlVlIZmWMTUnbr_r0ye77e0cE2cSFV2yc3Ka82CWw9vWDTU5/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;

}

div.navBulletsWrapper div.active {
background-position: 0 -11px;
}

.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}

#slider {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img alt="Фэнтези" height="210" src="ваше фото" width="480" /></a>
<a href="#"><img alt="Фэнтези 1" height="210" src="ваше фото"" width="480" /></a>
<a href="#"><img alt="Фэнтези 2" height="210" src="ваше фото"" width="480" /></a>
<a href="#"><img alt="Фэнтези 3" height="210" src="ваше фото"" width="480" /></a>
<a href="#"><img alt="Фэнтези 4" height="210" src="ваше фото"" width="480" /></a>
</div>
</div>

Синим выделила ссылки на фото.