如何修复 bxSlider javascript 库在图像下创建空白答案

【问题标题】：How to fix bxSlider javscript library creating a white space under images如何修复 bxSlider javascript 库在图像下创建空白
【发布时间】：2021-03-24 12:05:07
【问题描述】：

我是第一次使用 bxSlider 库，它运行良好。在将屏幕大小调整为移动大小之后实现滑块之前，它工作得很好，但在实现它之后，我注意到当我从库中包含slider class 然后将屏幕大小调整为移动大小时，它会在图像下方创建一个大的空白区域。任何帮助将不胜感激！

下面是我的刀片视图文件。

@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

【问题讨论】：

标签： jquery css laravel

【解决方案1】：

您的 foreach 循环中缺少幻灯片类。

<div class="slide">

【讨论】：