CODEWITHSUNDEEP
javascripthtmlcss
Josh Ribakoff
Josh Ribakoff

Reputation: 3058

Insert margin/padding between the slides on a carousel

Here is a jsfiddle example: http://jsfiddle.net/72Hf2/

In this example div#reference is 500px wide... div#carousel expands to consume that.

The problem is there is no spacing between each div.slide. Adding any padding/margins to div.slide will break the carousel, therefore I have inserted a div.thumbnail inside of each div.slide and have applied my margin there, like this: http://jsfiddle.net/c34CF/1/

However that leaves a gap at the end. I must have no gap at the end.. however I can't simply use :last-child because the last visible slide is not the last element in the DOM. How can I achieve the spacing between slides without the gap issue?

From what I understand the best way would be applying a negative left/right margin on the div#carousel and then applying a positive left & right margin on each div.slide, which works in the jsFiddle but it screws up the actual carousel (The JS code assumes that div#wrapper is the exact sum of the widths of div.slide)... do I need to fork that carousel & change the way it works, or is there a workaround in CSS?

Upvotes: 0

Views: 3098

Answers (2)

callmetwan
callmetwan

Reputation: 1350

Instead of using :last-child, you could use :first-child and swap the margin-right for margin-left

It would be something like this:

.thumbnail {
    border:1px red solid;
    margin-left:15px;
}

.slide:first-child .thumbnail {
    margin-left: 0;
}

If you don't have to worry about IE7 or less, you can skip adding the .thumbnail altogther by setting the box-sizing property to border-box.

.slide {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;    /* not sure if the prefixes are still needed */
    margin-left: 15px;
}

.slide:first-child{
    margin-left: 0;
}

Box-sizing controls how margin and padding affect the width of an element. The default is content-box which works the way you are used to: an element has a width, lets say 100px and margin and padding extend off of that. So if you have 10px margin and 5px padding your width+margin+padding will equal 130.

When setting the property to border-box, the width includes margin and padding. So 100px width + 10px + 5px padding will have a total width of...100px! In other words, the margin and padding squish the content instead of pushing more space outwards. Chris Coyier as a great article and a an example to see it in action.

EDIT: Fiddle using :first-child: http://jsfiddle.net/Ws4UQ/2/

Relevant code:

#wrapper {
    position:relative;
    left:0;
    width:1300px;
    margin-left:-115px; /* This is the width + margin of .slide */
}

.slide {
    width:100px;
    float:left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;    /* not sure if the prefixes are still needed */
    margin-left: 15px;
}

.slide:first-child {
    margin-left: 0;
}

The margin just needs to taken into account when sliding the carousel (#wrapper). Instead of moving it by -100px, it will be -115px (the extra 15px is whatever you set the margin to). Just know that if you need it to work in IE8 you'll have to create a polyfill (more info from Chris again).

Upvotes: 1

horse shoe
horse shoe

Reputation: 74

You can do it using the n-th child CSS selector as seen in http://jsfiddle.net/c34CF/6/

DIV:nth-child(6) > .thumbnail{

        margin-right:0 !important;
    }

However I guess, you might need something dynamic for your carousel of different sizes

If that is the case, try if following helps:

If you are using jQuery: $(".thumbnail > :nth-child(eqn)").css("margin-right", 0); //here "eqn" should be an expression which will help you access the last thumbnail index displayed in the carousel.

If you are not using jQuery, try using n-th child selector property using basic javascript.

Hope this helps.

Upvotes: 1

Related Questions