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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wklejony jako tekst z formatowaniem.   Przywróć formatowanie

  Maksymalna ilość emotikon wynosi 75.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Twoja poprzednia zawartość została przywrócona.   Wyczyść edytor

×   Nie możesz wkleić zdjęć bezpośrednio. Prześlij lub wstaw obrazy z adresu URL.

Zaloguj się, aby obserwować  

×
×
  • Utwórz nowe...