6

我有一个来自客户端的（不寻常的）请求，要求在“幻灯片”动画期间每张幻灯片之间至少有 40 像素的填充/边距。Flexslider 的默认设置是让项目相互刷新。

“itemMargin”在 2.0 中有一个新的 JQuery 选项，但它似乎只用于“轮播”设置。如果我通过 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
    });
4

2 回答 2

8

与其尝试将边距直接应用于 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;
}

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

.flexslider {
  margin: 0 -20px;
}

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

于 2012-12-03T23:15:59.120 回答
0

我可以通过一些小技巧来实现几乎你想要的：

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

在静态状态下隐藏边距会很好，但任何减小容器宽度的尝试都会导致图像定位不佳和/或重叠。我尝试了各种方法，但未能欺骗 flexslider 做我想做的事。

演示

通过仔细设计 img 元素的样式，可以在 CSS 中实现同样的效果。这里的秘密似乎是用你自己的类构建 img 标签，这样 CSS 特异性规则会阻止 flexslider（或者是 jsFiddle？）覆盖指令。在演示中，我使用了class="x".

演示

于 2012-10-16T06:19:04.063 回答