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%; }

调整浏览器大小时，bxslider滑块图片不会调整大小

1 个答案: