Самый простой слайдер на CSS

Доброго времени суток, друзья. Простой и достаточно красивый слайдер изображений или текста, без подключения библиотеки jQuery можно сделать на CSS. В нём есть, конечно, минусы - он не поддерживается старыми браузерами,
в нём нет кнопок предыдущий/следующий и остановки слайдов. Но для вывода нужной информации с картинкой и её описанием вполне может быть применён в блоге.

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

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

Нам понадобиться 4 картинки размерами - высота height: 300px; и  ширина width: 550px; Вы можете сделать свой размер изображений, но важно, чтобы вы их исправили в коде тоже.

Копируйте в блокнот этот код и разберём вкратце настройки.

<div id="slider">
<div>
<img alt="" src=" адрес картинки 1 " />
        <br />
<h1>
Кенгуру</h1>
<p>История — миф о появлении названия кенгуру. Джеймс Кук, высадившись на берег Австралии, увидел странное животное. Высокое, как человек и прыгало. На вопрос : «Что это за животное?», вождь местного племени ответил: «Я не понимаю», что для Кука прозвучало как «кенгуру». </p></div>

<div>
<img alt="" src=" адрес картинки 2 " />
        <br />
<h1>
Попугаи</h1>
<p>Длительность жизни экзотических попугаев зависит, в первую очередь, от их вида. Небольшие попугаи, к примеру, волнистые, живут примерно 10-15 лет. Птицы средних размеров будут радовать своих владельцев дольше – их существование после рождения продолжается от 20 до 30 лет. Реальные сроки жизни крупных попугаев точно не определены: одни источники указывают на то, что они живут от 50 до 120 лет, другие ограничивают эту цифру шестьюдесятью годами. </p></div>

<div>
<img alt="" src=" адрес картинки 3" />
        <br />
<h1>
Слон</h1>
<p>Слоны — уникальные по своей анатомии и физиологии животные. Они настолько сильно отличаются от всех прочих млекопитающих, что выделены в самостоятельный отряд Хоботных, который включает всего 2 вида. В ископаемом состоянии известно гораздо больше видов вымерших хоботных, из которых самым известным является мамонт. В настоящее время сохранились только африканский и индийский слоны. </p></div>

<div>
<img alt="" src="адрес картинки 4 " />
        <br />
<h1>
Лошади</h1>
<p>Пород домашних лошадей в мире множество. Выделяют и несколько типов лошадей, каждый из которых имеет своё предназначение. Для досуга — развлечений, конных прогулок на природе — используют прогулочных лошадей «хобби-класса». Для туризма, верховой езды — спортивных лошадей, для ипподромных испытаний — скаковых и рысистых. В России к ним относится пятая часть от 2-миллионного поголовья лошадей. В рабоче-пользовательных — около 1,5 млн, хотя потребность в них раза в три-четыре выше. </p></div>


<div>
<img alt="" адрес картинки 1" />
        <br />
<h1>
Кегуру</h1>
<p>История — миф о появлении названия кенгуру. Джеймс Кук, высадившись на берег Австралии, увидел странное животное. Высокое, как человек и прыгало. На вопрос : «Что это за животное?», вождь местного племени ответил: «Я не понимаю», что для Кука прозвучало как «кенгуру».  </p></div>

</div>

<style>
#slider {
    height: 300px;
    overflow: hidden;
    width: 550px;
    margin: 0 auto;
}
#slider div {
    position: relative;
    height: 300px;
}
#slider img {display: block;}
#slider h1 {
    color: white;
    font-size: 300%;
    left: 60px;
    position: relative;
    text-shadow: 0 0 2px #000000, 0 0 2px #000000;
    top: -260px;
}
#slider p {
    background-color:rgb(44, 74, 47);
    color: #EEEEEE;
    line-height: 120%;
    padding: 10px 20px;
    position: relative;
    top: -220px;
}
#slider div {
    animation: mymove 20s linear infinite;
 
    -moz-animation: mymove 20s linear 3s infinite; /* Firefox */
    -webkit-animation: mymove 20s linear infinite; /* Safari and Chrome */
}


@keyframes mymove {
    0% {top: 0px;}

    22% {top: 0px;}
    25% {top: -300px;}

    47% {top: -300px;}
    50% {top: -600px;}

    72% {top: -600px;}
    75% {top: -900px;}

    97% {top: -900px;}
    99.9999% {top: -1200px;}

    100% {top: 0px;}
}
/* Firefox */
@-moz-keyframes mymove {
 

    0% {top: 0px;}

    12% {top: 0px;}
    15% {top: -300px;}

    37% {top: -300px;}
    40% {top: -600px;}

    62% {top: -600px;}
    65% {top: -900px;}

    87% {top: -900px;}
    89.9999% {top: -1200px;}

    90% {top: 0px;}
    100% {top: 0px;}
}

/*Safari and Chrome*/
@-webkit-keyframes mymove {
    0% {top: 0px;}

    22% {top: 0px;}
    25% {top: -300px;}

    47% {top: -300px;}
    50% {top: -600px;}

    72% {top: -600px;}
    75% {top: -900px;}

    97% {top: -900px;}
    99.9999% {top: -1200px;}

    100% {top: 0px;}
}</style>

Обратите внимание, что в конце у нас есть дублирующий слайд первого. Важно. Это сделано для того, чтобы не было заметного "прыжка" после показана последнего слайда.

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

 В участке кода (блок описания) меняйте стили на свои-

#slider p {
    background-color:rgb(44, 74, 47); - общий фон блока
    color: #EEEEEE; -цвет шрифта
    line-height: 120%;- высота блока
    padding: 10px 20px;- отступы ( читаем здесь)
    position: relative;
    top: -220px;
}

Скорость анимации слайдов animation: mymove 20s linear infinite;

Вероятно, вам захочется сделать ещё и кликабельным сам заголовок слайда. Тогда нужно везде в коде добавить ссылку на страницу вот так, например -

<h1>
<a href="http://www.shpargalochki.ru/2016/05/krasivyj-slajder-izobrazhenij.html"> Попугаи</a></h1>

Готовый код устанавливаем в гаджет HTML/JavaScript в нужное место макета блога.
Такой слайдер отображает только 4 картинки. Для большего отображения слайдов нужно просчитывать анимацию.

Подумала, что таким образом можно вывести самые читаемые посты блога.

Если возникнут вопросы, задавайте в комментариях. Спасибо вам за визит и до скорых встреч.

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

Введите Ваш email