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

Plus

I'm pretty sure you would have to modify the plugin yourself. You could add an option and when the sliding animation occurs add the width to the distance of the slide. – Childbearing

Try applying margins to the images with a CSS directive, eg .slides img { margin: 0 20px; }, though it's possible that flexslider will strip them. – Swordtail

I have accomplished this with flexslider, I set the margins for the li's in the css and set the itemWidth option in the setup to the width of the li + the margin width. You could try that. – Prepossessing

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.

Watanabe

Answer 2

I can achieve very nearly what you want with a little jiggery-pokery:

HTML

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

Javascript/jQuery

var sliderImgWidth = 200,
    sliderMargin = 40;

$f = $('.flexslider').css('width', sliderImgWidth + sliderMargin);
$f.find('img').css({
    'width': '200px',
    'margin-right': sliderMargin / 2 + 'px',
    'margin-left': sliderMargin / 2 + 'px'
});
$f.flexslider({
    animation: "slide"
});

It would be good to hide the margins in the static state but any attempt to reduce the width of the container resulted in poor positioning of the images and/or overlap. I tried all sorts but failed to trick flexslider into doing what I wanted.

DEMO

The same can be achieved in CSS by carefully styling the img elements. The secret here seems to be to build the img tags with a class of your own, such that CSS specificity rules prevent flexslider (or is it jsFiddle?) from overriding the directives. In the demo, I have used class="x".

DEMO

Swordtail