Question

我在网页上使用了2个Bxsliders，第一个具有自适应高度。现在当出现更大（或更小）的图像时，下一个滑块和/或内容将其25个像素的边距保持在更改的高度，所以我的内容不断移动到位，我已经尝试了包装和东西以给出顶部或位置绝对但没有工作，我似乎无法在谷歌找到这个问题的任何人...我希望你可以把我推向正确的方向，因为我是相当新的

到目前为止的一个大th

的jquery：

$(document).ready(function(){
        $('.slider_big').bxSlider({
        slideWidth: 830,
        adaptiveHeight: true,
        minSlides: 1,
        maxSlides: 1,
        slideMargin: 10,
        auto: true,
        pause: 4000,
        controls: false,
        easing: 'swing',
        pager: false
      });
    });

    $(document).ready(function(){
        $('.slider_small').bxSlider({
        slideWidth: 200,
        minSlides: 4,
        maxSlides: 4,
        slideMargin: 10,
        pager: false
      });
    });

HTML：

 <body>
    <div id="main_wrapper">

        <div class="slider_big">
            <div class="slide"><img src="sliders/slide-images/big-slide/830-1.jpg"></div>
            <div class="slide"><img src="sliders/slide-images/big-slide/830-2.jpg"></div>
            <div class="slide"><img src="sliders/slide-images/big-slide/830-3.jpg"></div>
        </div> <!-- Sluiting slider_big -->

        <div class="slider_small">
            <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
            <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
            <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
            <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
            <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
            <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
            <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
            <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
            <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
        </div> <!-- Sluiting slider_small -->   
    </div> <!-- Sluiting wrapper -->
  </body>

Answer 1

关闭autoheight选项并在CSS中声明一个固定的高度。

.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 400px !important;}

这样，bxslider高度将为400像素。然后你可以使用

里面的图片来居中。

Bxslider adaptiveHett推送内容

1 个答案: