Jssor Slider horizontal scroll issue

Question

I'm using nopcommerce 3.80 for my site and wanted to use vertical full width slides on home page. I used Jssor slider jquery in place of nivo by editing my Nivo slider plugin. I'm able to see a vertical slider at homepage now, but it is giving a horizontal scroll bar and the image is not extending to full width instead it is giving white blank space in the right side. And also the scrollbar is making the page in the right side with white space and below the slider also. Please see the attached image for reference. Below also is the jssor slider plugin. Any help would be appreciated.

    @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>