Scroll x mit div

Question

ich einige Schieber auf meinen eigenen Weg machen wollen, aber es scheint etwas schlecht ist:

ich habe:

<div class="slider"> 
<div class="img first"></div> 
<div class="img second"></div> 
<div class="img third"></div> 
</div> 

.slider{width: 100%; max-height: 100%; overflow: hidden;} 
//I don't want to see scrolls 
.img{width: 100%; height: 100%; float: left;} 
.first{background: red;} 
.second{background: blue;} 
.third{background: green;} 

Im Grunde, was ich will, ist, dieses haben:

100%  100% 100% 
+-------+--------+-------+ 
+-------+ 
| 100% | 
|first | second third 
+-------+ 
+------------------------+ 

Das Problem ist, dass meine divs unter einander gehen .. Ist es ein Problem mit dem Schwimmer: links?

Answer 1

Von was Ihr Code mir oben erklärt, sieht es aus wie jede Folie Ihres Sliders wird ein Bild sein. Wenn ja, empfehle ich zu verändern Ihren Regler nach folgendem Code unter:

Code-Schnipsel:

.slider { 
 
    width: 100%; 
 
    max-width: 960px; 
 
    overflow: hidden; 
 
} 
 

 
.slider figure img { 
 
    width: 25%; 
 
    float: left; 
 
    height: auto; 
 
} 
 

 
.slider figure { 
 
    width: 400%; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    animation: 10s slide infinite; 
 
    -webkit-animation: 10s slide infinite; 
 
} 
 

 
@-webkit-keyframes slide { 
 
    0% { 
 
    left: 0%; 
 
    } 
 
    16% { 
 
    left: 0%; 
 
    } 
 
    33% { 
 
    left: -100%; 
 
    } 
 
    49% { 
 
    left: -100%; 
 
    } 
 
    66% { 
 
    left: -200%; 
 
    } 
 
    82% { 
 
    left: -200%; 
 
    } 
 
    100% { 
 
    left: -300%; 
 
    } 
 
}

<div class="slider"> 
 
    <figure> 
 
    <img src="https://i.ytimg.com/vi/mxbzT3uYXxE/maxresdefault.jpg"> 
 
    <img src="http://cdn.playbuzz.com/cdn/1af8dfed-eacb-4228-8219-8781715daa2d/115aad8d-8eee-45e4-b439-450602e843fd.jpg"> 
 
    <img src="http://www.majorspoilers.com/wp-content/uploads/2011/08/MSC6.jpg"> 
 
    <img src="http://static.srcdn.com/wp-content/uploads/franklin-richards.jpg"> 
 
    </figure> 
 
</div>

Anstatt einer bestimmte DIV jedes Mal mit Ihrer img Klasse nennen, können wir Verwenden Sie stattdessen nur das tatsächliche img-Tag. Zusammen mit dieser Methode habe ich die keyframes CSS verwendet, um die Positionierung der Objektträgerbilder zu steuern.

Sollten Sie das wirklich mit div Inhalt steuern möchten, können Sie einfach die Bilder in Ihrem div wickeln und die Klasse .slider figure img zu .slider figure div verändern, um andere Arten von Inhalten zu umfassen.

Ich hoffe, dass dies Ihnen bei Ihren Bemühungen hilft.