調整瀏覽器大小時，bxslider滑塊圖像不會調整大小

Question

我直接說到這里。

我正在使網站響應，並且我正在使用bxslider功能正常工作，但是當我嘗試調整大小時，我想要的是將圖像放入各自的div中...

但是當我在調整大小事件上省略了slider.reloadShow()時...圖像調整大小就好了...滑塊的事件不再起作用..

的HTML

<div class="outside">
    <div class="custom-controls">
        <ul>
            <li><span id="slider-prev"></span></li>
            <li><span id="slider-next"></span></li>
    </div>
</div>
    <div class="slide-content">
    <div class="slider8">
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar1" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar2" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar3" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar4" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar5" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar6" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar7" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar8" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar9" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar10" width="100%"></div>
    </div>
</div>

JQUERY

    var slider;
    $(document).ready(function(){
         slider=$('.slider8').bxSlider({
            auto: true,
            autoHover: true,
            // autoControls: true,
            mode: 'vertical',
            minSlides: 5,
            slideMargin: 10,
            pager: false,
            speed: 2000,
            nextSelector: '#slider-next',
            prevSelector: '#slider-prev',
            pager: false,
            pause: 100,
            nextText: '<i class="fa fa-caret-down"></i>',
            prevText: '<i class="fa fa-caret-up"></i>'
          });



        $(window).resize(function(){
            slider.reloadShow();
        });

    });

Answer 1

您可以通過CSS執行此操作

.slide-content .slide img { width:100%; }