jquery - Flexslider - 幻灯片之间可能有边距吗？

Question

我收到一个来自客户的(不寻常的)请求，要求在“幻灯片”动画期间每张幻灯片之间至少有 40 像素的填充/边距。 Flexslider 的默认设置是使项目相互齐平。

2.0 中有一个新的 JQuery 选项用于“itemMargin”，但它似乎仅用于“carousel”设置。如果我通过 CSS 应用边距，每张幻灯片都会碰到下一张幻灯片。

是否有办法在幻灯片之间应用边距，或者这是一个不可能的选择？

这是我当前的选项设置

$(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

不要尝试直接向 LI 元素应用边距，而是在每张幻灯片中包含另一个环绕图像的元素，然后对其应用边距。

<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>

然后在你的CSS中做这样的事情(假设你想要幻灯片之间有40px，在幻灯片的每一侧添加20px:

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

如果您想让 slider 的左/右侧与页面内容的其余部分保持齐平，请在 Flexslider 本身上添加负边距。

.flexslider {
  margin: 0 -20px;
}

您可以在 Flexslider 的每张幻灯片中添加任意数量的标记，这样您就可以根据需要添加标题或其他布局修改。