bxslider slider image doesn't resize when I resize the browser

I'm going straight to the point here..

i'm making the site responsive and I am using bxslider the functionality works fine but what I want is to fit the image inside their respective divs when I tried to resize...

but when I omit the slider.reloadShow() on the resize event... the image resize just fine... event for slider won't work anymore..

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

    });