.fslider-3,.fslider-4,.fslider-5 {
  width: 100%;
  height: 200px;
  margin: 0 auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;    
}

/*
################
              Fade-In Fade-Out Slider -fslider- MIT 3 BILDERN
################
*/


.fslider-3 .slide1 {
      background-size: cover;
    animation-name:fade3-1;

} 
.fslider-3 .slide2 {
      background-size: cover;
    animation-name:fade3-2;
}
.fslider-3 .slide3 {
      background-size: cover;
    animation-name:fade3-3;
}


@keyframes fade3-1
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade3-2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3-3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}






/*
################
              Fade-In Fade-Out Slider -fslider- MIT 4 BILDERN
################
*/



.fslider-4 .slide1 {
      background-size: cover;
    animation-name:fade4-1;

} 
.fslider-4 .slide2 {
      background-size: cover;
    animation-name:fade4-2;
}
.fslider-4 .slide3 {
      background-size: cover;
    animation-name:fade4-3;
}

.fslider-4 .slide4 {
      background-size: cover;
    animation-name:fade4-4;
}


@keyframes fade4-1
{
  0%   {opacity:1}
  25% { opacity: 0}
  50% { opacity: 0}
  75% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade4-2
{
  0%   {opacity:0}
  25% { opacity: 1}
  50% { opacity: 0 }
  75% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade4-3
{
  0%   {opacity:0}
  25% { opacity: 0}
  50% { opacity: 1}
  75% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade4-4
{
  0%   {opacity:0}
  25% { opacity: 0}
  50% { opacity: 0}
  75% { opacity: 1}
  100% { opacity: 0}
}





/*
################
              Fade-In Fade-Out Slider -fslider- MIT 5 BILDERN
################
*/




.fslider-5 .slide1 {
      background-size: cover;
    animation-name:fade5-1;

} 
.fslider-5 .slide2 {
      background-size: cover;
    animation-name:fade5-2;
}
.fslider-5 .slide3 {
      background-size: cover;
    animation-name:fade5-3;
}

.fslider-5 .slide4 {
      background-size: cover;
    animation-name:fade5-4;
}

.fslider-5 .slide5 {
      background-size: cover;
    animation-name:fade5-5;
}


@keyframes fade5-1
{
  0%  { opacity: 1}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 0}
  80% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade5-2
{
  0%   {opacity:0}
  20% { opacity: 1}
  40% { opacity: 0 }
  60% { opacity: 0 }
  80% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade5-3
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 1}
  60% { opacity: 0}
  80% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade5-4
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 1}
  80% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade5-5
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 0}
  80% { opacity: 1}
  100% { opacity: 0}
  
}

[class^="lslider-"] {
    padding-top:35%; /* höhe einstellen (Prozentual zur Breite der Anzeige)*/
    width:100%;
    position: relative;
	overflow: hidden;
}

[class^="lslider-"] > *{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    margin-left:0;
}        

/* Für 3 Slides */
@keyframes first_slide_3 {
  0%,25% { margin-left: 0%; }
  35%, 60% { margin-left: -100%; }
  70%, 90% { margin-left: 100%; }
  100% { margin-left: 0%; }
}      
@keyframes nth_slides_3 {
  0%,25% { margin-left: 0%; }
  35%, 60% { margin-left: -100%; }
  70%, 90%  { margin-left: -200%; }
  100% { margin-left: -300%; }
}    

/* Für 4 Slides */
@keyframes first_slide_4 {
  0%,15% { margin-left: 0%; }
  25%, 40% { margin-left: -100%; }
  50%, 65% { margin-left: -200%; }
  75%, 90% { margin-left: 100%; }
  100% { margin-left: 0%; }
}      
@keyframes nth_slides_4 {
  0%,15% { margin-left: 0%; }
  25%, 40% { margin-left: -100%; }
  50%, 65% { margin-left: -200%; }
  75%, 90% { margin-left: -300%; }
  100% { margin-left: -400%; }  
}

/* Für 5 Slides */
@keyframes first_slide_5 {
  0%,10% { margin-left: 0%; }
  20%, 30% { margin-left: -100%; }
  40%, 50% { margin-left: -200%; }
  60%, 70% { margin-left: -300%; }
  80%, 90% { margin-left: 100%; }
  100% { margin-left: 0%; }
}      
@keyframes nth_slides_5 {
  0%,10% { margin-left: 0%; }
  20%, 30% { margin-left: -100%; }
  40%, 50% { margin-left: -200%; }
  60%, 70% { margin-left: -300%; }
  80%, 90% { margin-left: -400%; }
  100% { margin-left: -500%; }  
}        

.lslider-3 > * { animation-name: first_slide_3; }
.lslider-3 > *:nth-child(n+2)  { animation-name: nth_slides_3; }

.lslider-4 > * { animation-name: first_slide_4; }
.lslider-4 > *:nth-child(n+2)  { animation-name: nth_slides_4; }        

.lslider-5 > * { animation-name: first_slide_5; }
.lslider-5 > *:nth-child(n+2)  { animation-name: nth_slides_5; }        


[class^="lslider-"] .slide2 { left:100%; }
[class^="lslider-"] .slide3 { left:200%; }
[class^="lslider-"] .slide4 { left:300%; }
[class^="lslider-"] .slide5 { left:400%; }