CODEWITHSUNDEEP
jquerysliderslideshowflexslider
Ashkas
Ashkas

Reputation: 117

Flexslider - Possible to have margin between slides?

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

Upvotes: 6

Views: 12262

Answers (2)

Nate Lampton
Nate Lampton

Reputation: 349

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.

Upvotes: 8

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

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

Upvotes: 0

Related Questions