How to fix bxSlider javscript library creating a white space under images

I'm using bxSlider library for the first time and it works just well. Before implementing the slider after resizing the screen to mobile size it works just fine but after implementing it I notice when I include the slider class from the library then on resizing the screen to mobile size it creates a big white space under the image. Any help will be highly appreciated!

Below is my blade view file.

@extends('layouts')
@section('head-scripts')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

@endsection
@section('content')
    <br>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-xs-12">
                    {{--Below is the slider class--}}
                    <div class="slider">
                        @foreach(json_decode($vehicle->filenames) as $picture)
                            <div>
                                <img src="{{ asset('files/'.$picture) }}" alt="" class="img-responsive wc-image">
                            </div>
                        @endforeach
                    </div>
                </div>
                {{--Another column--}}
            </div>
        </div>
    </section>
    <br>
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {
            $('.slider').bxSlider();
        });
    </script>

@endsection