Geek Answers Handbook

Spacing between overlay divs without affecting width

I have been trying lately to make a slide divs using a script called Owl-Carousel where the divs are 10 pixels apart, so the drag and drop looks nice.

I made all the code to show the purpose: http://codepen.io/anon/pen/VLZmWd

I tried changing fields without success.

CSS is as follows:

.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; }

How can I move slides between each other by 10 pixels, while keeping the red / green areas of the same width and the .generic class intact.

The reason I want the ".generic" class to not change is mainly because I loaded my code so that CSS is easily modified for width: I have many different classes / elements that are supposed to take width wrappers, I don’t need to set the width for each of them or set the fields for code controllability.

EDIT: To make it clear, when using the mouse while dragging the carousel, my goal is to see 10 pixels of white between each slide slide (which does not correspond to the code), while keeping the width of the green area the same as the width of the red area.

thanks

+5
source share
2 answers

Well ... I think this is what you want:

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') } }); });

To get the desired behavior, you must move the container (.owl-wrapper). The default value is always on the left: 0, but since we want border , we need to move it accordingly. In CSS (if I remember well :)), I just added:

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

EDIT2: margin-left, but instead should now work in all (modern) browsers. :)

+2
source

You can apply a margin to your meow and add a container around each of them, which makes them smaller than the total size of the container by adding a margin. http://codepen.io/anon/pen/aOopOK

You can also use window size with the same effect if you do not want to change the HTML. http://codepen.io/anon/pen/QbLdbG

However, I would recommend that you develop this functionality yourself and not use an owl carousel, especially if you are just learning JS. This is not a particularly complicated concept, although it certainly goes beyond the stackoverflow answer.

+1
source

More articles:


All Articles