Javascript 如何使滑块100%移动到页面

我整个上午都在玩这个代码，试图让这个滑块在浏览器中100%运行。如果有帮助的话，我正在使用swiper slider？我在下面附上了我的代码以供参考

如果在全宽视图中预览代码，则滑块似乎被困在原始图像大小中，而不像其他故事那样移动到窗口边缘。任何建议都可以提出

var swiper=新的swiper（“.swiper容器”{
分页：'.swiper分页'，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
paginationClickable:true，
初始幻灯片：0，
幻灯片视图：1，
间隔时间：20，
中心幻灯片：对，
自动播放：2000，
autoplayDisableOnInteraction:false
});
/*让事情变得漂亮
---------------------------- */
* {
保证金：0；
填充：0；
框大小：边框框；
}
.opencanvascontainer{
保证金：0自动；
最大宽度：1140px；
}
[类别*=位-]{
浮动：左；/*填充：.3em*/
位置：相对位置；
}
/*OBSW网格系统
---------------------------- */
.盒子{
文本对齐：居中；
边框：实心1px黑色；
颜色：#000；
字体大小：12px；
字体系列：“proxima_nova_rgregular”，无衬线；
填充：15px 10px 15px 10px；
}
.bit-1{
宽度：100%；
}
.bit-2{
宽度：50%；
填充：20px；
}
.bit-3{
宽度：33.33333%；
填充：20px；
}
.第4位{
宽度：25%；
}
.bit-4-tabs{
宽度：25%；
填充：10px；
}
.第5位{
宽度：20%；
}
.bit-5-tabs{
宽度：20%；
填充：10px；
}
.第6位{
宽度：16.66667%；
填充：.3em；
}
.bit-7{
宽度：14.28571%；
}
.第8位{
宽度：12.5%；
}
.bit-9{
宽度：11.11111%；
}
.第10位{
宽度：10%；
}
.bit-11{
宽度：9.091%；
}
.bit-12{
宽度：8.33333%；
}
.第25位{
宽度：25%；
}
.比特40{
宽度：40%；
}
.bit-60{
宽度：60%；
}
.bit-75{
宽度：75%；
}
.bit-35{
宽度：35%；
填充：20px；
}
.bit-65{
宽度：65%；
填充：20px；
}
/*笔记本电脑*/
@介质（最小宽度：50em）和（最大宽度：68.75em）{
.bit-7{
宽度：100%；
}
.bit-10、.bit-12、.bit-4、.bit-8{
宽度：50%；
}
}
/*平板电脑*/
@介质（最小宽度：30em）和（最大宽度：50em）{
.bit-10、.bit-12、.bit-4、.bit-6、.bit-8{
宽度：50%；
}
.bit-1、.bit-11、.bit-3、.bit-5、.bit-7、.bit-9{
宽度：100%；
}
}
/*流动的*/
@介质（最大宽度：30em）{
.位1、.位10、.位11、.位12、.位2、.位3、.位4、.位5、.位6、.位7、.位8、.位9、.位35、.位65{
宽度：100%；
填充顶部：0px；
右边填充：0px；
垫底：20px；
左侧填充：0px；
}
.bit-5-tabs、.bit-4-tabs{宽度：50%；填充：5px；}
.storytext{左边距：15px；}
.storytextcenter{左边距：0px；}
.bottomlinespace{页边距底部：20px；}
.副标题{
字体大小：20px！重要；
页边顶部：1米！重要；
}
.花式span{页边顶部：1.5em！重要；}
}
/* -------------------------
末端OBSW网格系统*/
/*全宽包装
---------------------------- */
.fullwidthwrapper{
宽度：100%；
填充顶部：150px；
}
@介质（最大宽度：991px）{
.fullwidthwrapper{
垫面：5px；
}
}
@介质（最大宽度：907px）{
.fullwidthwrapper{
垫面：5px；
线高：42px；
}
}
/* -------------------------
端部全宽包装*/
/*标题滑块
---------------------------- */
.hpfullwidth顶部{
背景色：#fff；
背景重复：重复；
填充顶部：150px；
}
@介质（最大宽度：991px）{
.hpfullwidth顶部{
垫面：5px；
}
}
.图像支架{
最大宽度：1500px；
保证金：0自动；
}
/* -------------------------
端头滑块*/
/*图像悬停
---------------------------- */
.褪色{
不透明度：1；
过渡：不透明度。5s缓进缓出；
-moz过渡：不透明度。5s缓进缓出；
-webkit过渡：不透明度。5s易入易出；
}
淡入：悬停{
不透明度：0.5；
}
/* -------------------------
结束图像悬停*/
.故事文本{
边缘顶部：15px；
线高：20px；
}
.storytextcenter{
边缘顶部：15px；
线高：20px；
}
.一线{
字体系列：proxima_nova_rgbold，衬线；
字体大小：20px；
颜色：#000；
}
.二线{
字体系列：“proxima_nova_rgregular”，衬线；
字体大小：14px；
颜色：#000；
}
第三行{
字体系列：proxima_nova_rgbold，衬线；
字体大小：14px；
颜色：#000；
边框底部：实心2px#000000；
显示：内联；
垫底：2件；
}
.底线间距{
边缘底部：0px；
}
.副标题{
保证金：1.5EM0.3EM0；
字体大小：35px；
字母间距：5px；
}
.幻想{
线高：0.5；
文本对齐：居中；
}
.花式跨度{
显示：内联块；
位置：相对位置；
}
.想象的跨度：以前，
.想象一下：之后{
内容：“；
位置：绝对位置；
高度：5px；
边框底部：1px纯黑；
排名：0；
宽度：600px；
}
.想象一下：以前{
右：100%；
右边距：15px；
}
.想象一下：之后{
左：100%；
左边距：15px；
}
.标签容器{
宽度：100%；
保证金：0自动；
}
ul标签{
边缘顶部：1米；
填充：0px；
列表样式：无；
文本对齐：居中；
}
李先生{
背景：无；
颜色：#000；
显示：内联块；
填充：10px 15px；
光标：指针；
}
ul.tabs li.current{
背景：#fff；
颜色：#000；
文字装饰：下划线；
字体系列：proxima_nova_rgbold，衬线；
字体大小：粗体；
}
.选项卡内容{
显示：无；
背景：#fff；
}
.tab-content.current{
显示：继承；
}
.swiper容器{
宽度：100%；
高度：自动；
}
.滑梯{
文本对齐：居中；
字号：18px；
背景：#fff；
/*将幻灯片文本垂直居中*/
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
}
.swiper容器{
保证金：0自动；
位置：相对位置；
溢出：隐藏；
/*Webkit闪烁的修复*/
z指数：1；
}
.刷子容器无flexbox.刷子滑轨{
浮动：左；
}
.swiper container vertical>.swiper wrapper{
-网络工具包盒方向：vertic