0

Слайдер на CSS за Blogger

Слайдер
На всички да е добър денят. Ако четете често моите публикации сигурно вече сте усетили, че имам слабост към изображения и слайдери за тях. И ето още един красив слайдер за изображения. Той е много лесен за инсталиране в HTML/JavaScript притурка, или директно на необходимото място в публикация в HTML режим. Трябва само да инсталирате в кода адресите на вашите изображения и да им дадете наименование. Отдавна имам кода на този слайдер, но все не ми се получаваше, нещо в него не беше както трябва. Прочетох, експериментирах и сега той вече работи добре. И ето го и него, готов за споделяне с вас, приятели.


Кодът е:


<div class="slides">
<ul>
<li><img src="http://www.astromeridian.ru/assets/images/sonnik/priroda.jpg" alt="image01" />
<div>наименование</div>
</li>
<li><img src="http://i29.fastpic.ru/big/2011/1217/c3/62541e77fd313c9be765a83fc68420c3.jpg" alt="image02" />
<div>наименование</div>
</li>
<li><img src="http://www.travelshoppingitaly.com/wp-content/uploads/2013/03/krasivo-ozero-peyzazh-gory-priroda-favim-ru-337491.jpg" alt="image03" />
<div>наименование</div>
</li>
<li><img src="http://tg-journal.com/images/arhiv/turizm2/kuba/kuba.jpg" alt="image04" />
<div>наименование</div>
</li>
</ul>
</div>
<style>
.slides {
height:300px; /*височина слайдер   */
margin:50px auto;
overflow:hidden;
position:relative;
width:900px; /* обща ширина  */
}
.slides ul {
list-style:none;
position:relative;
}

@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;

-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}

.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}

@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.slides ul li div {

background-color:#003366;  /*фон заглавие   */
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;  /* размер и сянка на рамка  */
color:#FFFFFF;  /*цвят шрифт   */
font-size:24px;  /*размер шрифт   */
left:10%;  /* отстъп */
margin:0 auto;
padding: 20px;
position:absolute;
top:70%;
width:200px; /*височина на панела   */

-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

}</style>


Накратко ще ви го опиша. Изчислен е за четири елемента, четири изображения. Цялата ширина на блока заедно с описанието е 900 пиксела. Височината е 300 пиксела. Така че изображенията трябва да са със същия размер във височина и ширина, 300 пиксела на 500-600 пиксела.
Копирайте кода, отидете на тази страница и го поставете във формата за проверка. Там можете да видите резултата, като натиснете бутона в края на формата. И дори да направите своите собствени настройки, които също да проверите.
Това, което в кода е маркирано в червено е адреса на вашите изображения. Заменете моите адреси на изображения с вашите. В синьо са маркирани техните наименования. Всички променливи за указани с пояснителен текст в кода. Може да се наложи да промените и стойността на значението top: 70%; в една или друга посока. Това е позицията на блока по отношение на горния край.
Това са всичките му настройки. Ако има нещо, което не е ясно, моля напишете в коментарите. Е, това е за днес. Благодаря на всички и ще се видим скоро. Благодаря и на Виктория за помощта.

Източник: shpargalochki.ru

Няма коментари :

Публикуване на коментар

Ще съм признателна и наистина оценявам вашите приятелски коментари. Всеки опит да бъдат въведени автора и читателите в дискусия, както и препратките към външни ресурси ще бъдат премахвани. Моля, прочетете Terms of use And Privacy Policy. Благодаря за вашия отзив.


Copyright © БЛОГ ЗА БЛОГОВЕ   . All Rights Reserved
Original style & code - magentawave.com   -  Powered by Blogger