6

クライアントから、「スライド」アニメーション中に各スライド間に少なくとも 40 ピクセルのパディング/マージンがあるという (異常な) 要求があります。Flexslider のデフォルトは、アイテムが互いにフラッシュされることです。

2.0 には「itemMargin」用の新しい 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

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

于 2012-10-16T06:19:04.063 に答える