ITS barnim
  • Support
  • Impressum
  • Datenschutz

gehe zu

  • Startseite
  • Fernwartung

CSS Slider Beispiel

CSS Code Slider

hier ein Beispiel

#slider {
background: #fff;
border: 0px solid;
border-color: #49a349;
border-bottom-left-radius: 5% 5%;

box-shadow: 0 5px 0 #49a349;
box-sizing:border-box;
height: 160px;
width: 100%;
margin: 1px auto 0;
overflow: hidden;
position: relative;
}

#slider .img {

margin-right: 50px;
}

#slider .animate1 {
animation: cycle1 25s linear infinite;
}

#slider .animate2 {
animation: cycle2 25s linear infinite;
}

#slider .animate3 {
animation: cycle3 25s linear infinite;
}

#slider .animate4 {
animation: cycle4 25s linear infinite;
}

#slider .animate5 {
animation: cycle5 25s linear infinite;
}

#slider figure {
width: 150px; /* Breite des Bildes */
height: 150px; /* Höhe des Bildes */
position: absolute;
margin: 0;
bottom: 0px; /* Originalposition – Nicht im sichtbaren Ausschnitt */
left: calc(50% – 360px); /* Setzt Bild in die Mitte des sichtbaren Ausschnitts */
}

@keyframes cycle1 {
0% { top: 0px; } /* Am Anfang der Slideshow ist das erste Bild sichtbar */
4% { top: 0px; } /* Bild steht noch auf der Startposition */
16% { top: 0px; opacity:1; z-index:0; } /* Von 4% bis 16 % ist das Bild für 3 Sekunden sichtbar */
20% { top: -325px; opacity: 0; z-index: 0; } /* Von 16% bis 20% = 1 Sekunde für Slide Out */
21% { top: 325px; opacity: 0; z-index: -1; } /* Zurück auf die Originalposition */
92% { top: 325px; opacity: 0; z-index: 0; }
96% { top: 325px; opacity: 0; } /* Von 96% bis 100% = 1 Sekunde für Slide In */
100%{ top: 0px; opacity: 1; }
}

@keyframes cycle2 {
0% { top: 325px; opacity: 0; } /* Originalposition außer Sicht */
16% { top: 325px; opacity: 0; }/* Beginnt mit der Bewegung */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /* Von 20% bis 24% = 1 Sekunde für Slide In */
36% { top: 0px; opacity: 1; z-index: 0; } /* Von 24% bis 36 % = Bild für 3 Sekunden sichtbar */
40% { top: -325px; opacity: 0; z-index: 0; } /* Von 36% bis 40% = 1 Sekunde für Slide Out */
41% { top: 325px; opacity: 0; z-index: -1; } /* Zurück auf die Originalposition */
100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle3 {
0% { top: 325px; opacity: 0; }
36% { top: 325px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: -325px; opacity: 0; z-index: 0; }
61% { top: 325px; opacity: 0; z-index: -1; }
100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle4 {
0% { top: 325px; opacity: 0; }
56% { top: 325px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: -325px; opacity: 0; z-index: 0; }
81% { top: 325px; opacity: 0; z-index: -1; }
100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle5 {
0% { top: 325px; opacity: 0; }
76% { top: 325px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: -325px; opacity: 0; z-index: 0; }
}

.progress-bar {
position: relative;
top: -5px;
width: 680px;
height: 5px;
background: firebrick;
animation: fullexpand 25s ease-out infinite;
}

@keyframes fullexpand {
/* Anfang: Fortschrittsbalken steht ist nicht sichtbar */
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

/* Fortschrittsbalken bereit zum Start */
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

/* Fortschrittsbalken läuft 3 Sekunden an */
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

/* Fortschrittsbalken hat Ende erreicht */
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

/* Fortschrittsbalken wird unsichtbar und beginnt einen neuen Durchlauf */
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

#slider .label {

background: hsla(0,0%,100%,0.5);

box-sizing: border-box;
position: absolute;
padding-top: 5px;
height: auto; width: auto;
padding-left: 1em; top: 1em; padding-right: 20px;

border: 0px;

bottom: 0;

margin: 0;
color: #000000;

font-size: 14px;
text-align:left;
font-style:normal;

transition: left 0,3s ease-in-out;
}

/*ende bsu slider*/


Der dazugehörige HTML Code

<div id=“slider“>
<div id=“onframe“>
<figure class=“animate1″><img class=“size-full wp-image-1621 alignleft“ src=“https://domain/wp-content/uploads/bild.jpg“ alt=““ width=“120″ height=“109″ /><br><figcaption class=“label“><strong><span style=“color: #339966;“>Überschrift</span></strong><br><br>
beschreibung1.<br>
beschreibung2<br>

<hr />

</figcaption></figure>

<figure class=“animate2″><img class=“size-full wp-image-1613 alignleft“ src=“https://domain/wp-content/uploads/bild2.jpg“ alt=““ width=“100″ height=“60″ /><bR><figcaption class=“label“><strong>
<span style=“color: #339966;“>Überschrift</span></strong><br><br>
text text

<hr />

</figcaption></figure>
</div>
</div>

ITS barnim - IT Service & Consulting
© ITS barnim
Unsere Webseite verwendet Cookies,
um den Datenverkehr zu messen und um unsere Internetseite benutzerfreundlicher zu gestalten.
Wenn Sie die Webseite von ITS barnim nutzen, stimmen Sie der Verwendung von Cookies zu.
OKMehr dazu