Abstand zwischen überlagerten divs, ohne die Breite zu beeinflussen

Question

Ich habe vor kurzem versucht, eine Folie von divs zu machen, mit einem Skript namens Owl-Carousel, wo divs um jeweils 10 px beabstandet sind, so das Ziehen schön aussieht.

machte ich den gesamten Code für die Ansicht Zweck: http://codepen.io/anon/pen/VLZmWd

Ich habe versucht, die Ränder ohne Erfolg zu modifizieren.

Die CSS ist wie folgt:

.generic { // header on top of slide, must have wrapper width 
    background-color:red; 
    height: 30px; 
    text-align:center; 
} 

.item { // item (slide) inside the owl carousel, must have wrapper width 
    height: 300px; 
    background-color: #7FFFD4; 
    //margin-right:10px; // gives the spacing between slides, but works so bad 
} 

#wrapper { // wraps carousel and elements with generic class 
    margin:0px auto; 
    width:720px; 
    height: auto; 
} 

Wie kann ich Raum gleitet zwischen ihnen durch 10px während Rot/Grünflächen gleiche Breite und .Generischer Klasse unangetastet zu halten.

Der Grund, warum ich die Klasse ".generic" unverändert lassen möchte, ist hauptsächlich die Art und Weise, wie ich meinen Code aufgebaut habe, so dass das CSS für Breiten leicht modifizierbar ist: Ich habe viele verschiedene Klassen/Elemente Ich nehme an, dass ich die Breite des Wrappers übernehmen muss. Ich möchte nicht die Breite für jeden von ihnen festlegen oder Ränder für die Verwaltung von Code festlegen.

BEARBEITEN: Um es klar zu machen, wenn ich die Maus auf das Karussell schiebe, ist mein Ziel, 10px Weiß zwischen jedem Dia zu sehen (was im Codepen nicht der Fall ist), während die grüne Bereichbreite beibehalten wird Wie die rote Bereichsbreite.

Dank

Answer 1

Nun ... ich denke, das ist das, was Sie wollen:

http://codepen.io/anon/pen/QbLdpv

$(document).ready(function() { 
    $("#owl-demo").owlCarousel({ 

     navigation : true, // Show next and prev buttons 
     slideSpeed : 300, 
     paginationSpeed : 400, 
     singleItem:true, 
    afterMove: function (elem) { 

     var index = this.owl.currentItem; 

    $('.owl-wrapper').css('margin-left',-10*(index)+'px') 
    } 

}); 
}); 

gewünschte Verhalten zu erhalten, müssen Sie Behälter (.owl-Wrapper) bewegen - Standardposition ist immer links: 0, aber, da wir Grenze wollen - wir müssen es entsprechend verschieben. In CSS (wenn ich gut :) erinnern), habe ich gerade hinzugefügt:

.owl-item { 
    border-right:10px solid white; 


} 

EDIT2: margin-left, statt nach links, jetzt in allen (modern) Browsern funktionieren soll. :)

Answer 2

Sie können eine Marge auf Ihre meow s anzuwenden und einen Container um jeden von ihnen hinzuzufügen, die sie kleiner ist als die Gesamtgröße des Behälters, das Hinzufügen Marge macht. http://codepen.io/anon/pen/aOopOK

Sie können auch Box-Sizing mit demselben Effekt verwenden, wenn Sie den HTML-Code nicht ändern möchten. http://codepen.io/anon/pen/QbLdbG

Allerdings würde ich empfehlen, dass Sie diese Funktionalität selbst entwickeln und nicht Eulen-Karussell verwenden, besonders wenn Sie nur JS lernen. Es ist kein besonders komplexes Konzept, aber sicherlich außerhalb des Rahmens einer Stackoverflow-Antwort.