Skocz do zawartości
Zaloguj się, aby obserwować  
Little_gray

Alternatywa dla Nivo Slider

Polecane posty

Witam ostatnio kodując stronę znalazłem ciekawy skrypt zastępujący dotychczasowego nivo slidera skrypt składa się z 2 części kod php gdzie linkujemy swoje grafiki i głównej części css gdzie je wstawiamy

 

Demo

 

Kod PHP gdzie trzeba podlinkować:

 

 

i kodu css gdzie wstawiamy grafiki i zmieniamy rozmiary

 

\.slideshow { margin: 0px auto; width: 1920px; height: 450px; text-align: center; }

.baner li a { display: block; width: 1920px; height: 450px; position: absolute; z-index: 1; text-indent: -9999em; }

.baner, .baner:after { position: absolute; width: 100%; height: 450px; top: 0; left: 0; z-index: 0; }

.baner li { list-style: none; }

.baner li span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: transparent;
background-size: cover;
background-position: 50% 50%;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 20s ease infinite 0s;
-moz-animation: imageAnimation 20s ease infinite 0s;
-o-animation: imageAnimation 20s ease infinite 0s;
-ms-animation: imageAnimation 20s ease infinite 0s;
animation: imageAnimation 20s ease infinite 0s;
}
.baner li:nth-child(1) span {
background-image : url(../images/baner/baner1.jpg);}

.baner li:nth-child(2) span {
background-image: url(../images/baner/baner2.jpg);
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s; 
}
.baner li:nth-child(3) span {
background-image : url(../images/baner/baner3.jpg);
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s; 
}
.baner li:nth-child(4) span {
background-image : url(../images/baner/baner4.jpg);
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-o-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
@-webkit-keyframes imageAnimation { 
0% { opacity: 0;}
13% { opacity: 1;}
25% { opacity: 1;}
37% { opacity: 0;}
100% { opacity: 0;}
}
@-moz-keyframes imageAnimation { 
0% { opacity: 0;}
13% { opacity: 1;}
25% { opacity: 1;}
37% { opacity: 0;}
100% { opacity: 0;}
}
@-o-keyframes imageAnimation { 
0% { opacity: 0;}
13% { opacity: 1;}
25% { opacity: 1;}
37% { opacity: 0;}
100% { opacity: 0;}
}
@-ms-keyframes imageAnimation { 
0% { opacity: 0;}
13% { opacity: 1;}
25% { opacity: 1;}
37% { opacity: 0;}
100% { opacity: 0;}
}
@keyframes imageAnimation { 
0% { opacity: 0;}
13% { opacity: 1;}
25% { opacity: 1;}
37% { opacity: 0;}
100% { opacity: 0;}
}





  • Like 1

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się

Zaloguj się, aby obserwować  

×