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

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

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

Слайдер 1

Посмотрите слайдер в тестовом блоге. А картинку можно посмотреть ниже.
Слайдер больше подходит для вертикальных картинок. 
Слайдер 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>&#8249;</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>&#8250;</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 картинок. Здесь лучше выглядят горизонтальные картинки. 
Слайдер 2
Код:
<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>
Синим выделила ссылки на фото.

Ваши комментарии:

Комментарии со спамом удаляются.