littleHtml Freak
Mitglied
Hallo zusammen,
ich benutze diesen reinen CSS3 Slider. An ihm gefällt mir nicht, dass er nicht mehr als 5 Bilder darstellen kann. Daher möchte ich ihn mit php dynamisieren (tolles Wort). Dazu muss ein Teil des CSS' in einen style-Tag geschrieben und daher zusammengefasst werden.
Dazu ist meine Frage wie ich diesen Teil des CSS'
in diesen Integrieren kann:
dx
ich stelle mir das ungefähr so vor:
das geht natürlich nicht....
Hat jemand eine Idee??
Gruß Simon
ich benutze diesen reinen CSS3 Slider. An ihm gefällt mir nicht, dass er nicht mehr als 5 Bilder darstellen kann. Daher möchte ich ihn mit php dynamisieren (tolles Wort). Dazu muss ein Teil des CSS' in einen style-Tag geschrieben und daher zusammengefasst werden.
Dazu ist meine Frage wie ich diesen Teil des CSS'
Code:
@keyframes cycle {
0% { top: 0px; } /* When you start the slide, the first image is already visible */
4% { top: 0px; } /* Original Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
100%{ top: 0px; opacity: 1; }
}
Code:
#slider li.firstanimation {
animation: cycle 25s linear infinite;
}
ich stelle mir das ungefähr so vor:
Code:
#slider li.firstanimation {
animation: @keyframes cycle {
0% { top: 0px; } /* When you start the slide, the first image is already visible */
4% { top: 0px; } /* Original Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
100%{ top: 0px; opacity: 1; }
}
25s linear infinite;
}
Hat jemand eine Idee??
Gruß Simon