Flexslider - Possible to have margin between slides?

Question

I have an (unusual) request from a client for there to be at least 40 pixels padding/margin between each slide during the "slide" animation. The default for Flexslider, is for the items to be flushed against one another.

There's a new JQuery option in 2.0 for "itemMargin", but it appears to be only used for the "carousel" set up. If I apply margin via CSS, each slide bumps into the next slide.

Is there anyway to apply margin between slides, or is this an impossible option?

Here's my current option set up

$(window).load(function() {
    $('.home_slider').flexslider({

        animation: "slide",              //String: Select your animation type, "fade" or "slide"
        smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
        slideshow: false,                //Boolean: Animate slider automatically
        controlNav: false, 
        directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
        prevText: "%",           //String: Set the text for the "previous" directionNav item
        nextText: "&",
        // Carousel Options
        itemMargin: 40
    });

Answer 1

Instead of trying to apply a margin directly to the LI element, include another element that wraps around the image in each slide and then apply the margin to it.

<div class="flexslider">
  <ul class="slides">
    <li><div class="slide-contents"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /></div></li>
    <li><div class="slide-contents"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /></div></li>
    <li><div class="slide-contents"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" /></div></li>
    </ul>
</div>

Then in your CSS do something like this (assuming you want 40px between slides, add 20px on each side of a slide:

.flexslider .slide-contents {
  margin: 0 20px;
}

And if you want to keep the left/right sides of the slider flush with the rest of the page content, add a negative margin on the flexslider itself.

.flexslider {
  margin: 0 -20px;
}

You can include as much markup as you like inside each slide in Flexslider, which allows you to add captions or other layout modifications as needed.