Jssor Slider水平滚动问题

Question

我正在为我的网站使用nopcommerce 3.80，并希望在主页上使用垂直全宽幻灯片。我通过编辑我的Nivo滑块插件使用Jssor slider jquery代替nivo。我现在可以在主页上看到一个垂直滑块，但是它给出了一个水平滚动条，图像没有延伸到全宽，而是在右侧给出了白色的空白区域。此外，滚动条使页面右侧有白色空间，滑块下方也是如此。请参阅附图以供参考。下面还有jssor滑块插件。任何帮助将不胜感激。

    @model Nop.Plugin.Widgets.NivoSlider.Models.PublicInfoModel
    @{
        Layout = "";

        Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jssor.slider-21.1.6.min.js");
        @*Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jquery.nivo.slider.js");
        Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/nivo-slider.css");
        Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/custom/custom.css");*@
    }
    @using Nop.Web.Framework.UI

    @helper RenderSliderLine(string pictureUrl, string text, string link, string dataTransition = "")
    {
        if (!string.IsNullOrEmpty(pictureUrl))
        {
            if (!string.IsNullOrEmpty(link))
            {
    <a href="@link">
        <img src="@pictureUrl" data-thumb="@pictureUrl" data-transition="@dataTransition" alt="" title="@text" />
    </a>
            }
            else
            {
    <img src="@pictureUrl" data-thumb="@pictureUrl" data-transition="@dataTransition" alt="" title="@text" />
            }
        }
    }
    <script type="text/javascript">
        jssor_1_slider_init = function () {

            var jssor_1_options = {
                $AutoPlay: true,
                $DragOrientation: 2,
                $PlayOrientation: 2,
                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$
                }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 1920);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            //responsive code end
        };

    </script>
    <style>
        /* jssor slider arrow navigator skin 08 css */
        /*
            .jssora08l                  (normal)
            .jssora08r                  (normal)
            .jssora08l:hover            (normal mouseover)
            .jssora08r:hover            (normal mouseover)
            .jssora08l.jssora08ldn      (mousedown)
            .jssora08r.jssora08rdn      (mousedown)
            */
        .jssora08l, .jssora08r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 50px;
            height: 50px;
            cursor: pointer;
            background: url('~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/a08.png') no-repeat;
            overflow: hidden;
            opacity: .4;
            filter: alpha(opacity=40);
        }

        .jssora08l {
            background-position: -5px -35px;
        }

        .jssora08r {
            background-position: -65px -35px;
        }

        .jssora08l:hover {
            background-position: -5px -35px;
            opacity: .8;
            filter: alpha(opacity=80);
        }

        .jssora08r:hover {
            background-position: -65px -35px;
            opacity: .8;
            filter: alpha(opacity=80);
        }

        .jssora08l.jssora08ldn {
            background-position: -5px -35px;
            opacity: .3;
            filter: alpha(opacity=30);
        }

        .jssora08r.jssora08rdn {
            background-position: -65px -35px;
            opacity: .3;
            filter: alpha(opacity=30);
        }
    </style>
    <div class="slider-wrapper theme-custom" id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">

        <!-- Loading Screen -->

        <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
            <div data-p="112.50" style="display: none;">
                @RenderSliderLine(Model.Picture1Url, Model.Text1, Model.Link1)
            </div>
            <div data-p="112.50" style="display: none;">
                @RenderSliderLine(Model.Picture2Url, Model.Text2, Model.Link2)
            </div>
            <div data-p="112.50" style="display: none;">
                @RenderSliderLine(Model.Picture3Url, Model.Text3, Model.Link3)
            </div>
            <div data-p="112.50" style="display: none;">
                @RenderSliderLine(Model.Picture4Url, Model.Text4, Model.Link4)
            </div>
            <div data-p="112.50" style="display: none;">
                @RenderSliderLine(Model.Picture5Url, Model.Text5, Model.Link5)
            </div>
        </div>
        <!-- Arrow Navigator -->
        <span data-u="arrowleft" class="jssora08l" style="top:8px;left:8px;width:50px;height:50px;" data-autocenter="1"></span>
        <span data-u="arrowright" class="jssora08r" style="bottom:8px;right:8px;width:50px;height:50px;" data-autocenter="1"></span>

        <script type="text/javascript">jssor_1_slider_init();</script>
    </div>