我整个早上都在玩这段代码，试图让这个 slider 100% 在浏览器中运行。如果有帮助，我正在使用滑动 slider ？我在下面附上了我的代码以供引用。
如果您在全宽 View 中预览代码，则 slider 似乎被困在原始图像大小中，而不是像其他故事那样移动到窗口的边缘。任何建议都会被应用。
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
initialSlide: 0,
slidesPerView: 1,
spaceBetween: 20,
centeredSlides: true,
autoplay: 2000,
autoplayDisableOnInteraction: false
});/* Making Thing Pretty
---------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.opencanvascontainer {
margin: 0 auto;
max-width: 1140px;
}
[class*=bit-] {
float: left;/*padding:.3em;*/
position:relative;
}
/* OBSW Grid System
---------------------------- */
.box {
text-align: center;
border: solid 1px black;
color: #000;
font-size: 12px;
font-family: 'proxima_nova_rgregular', sans-serif;
padding: 15px 10px 15px 10px;
}
.bit-1 {
width: 100%;
}
.bit-2 {
width: 50%;
padding: 20px;
}
.bit-3 {
width: 33.33333%;
padding: 20px;
}
.bit-4 {
width: 25%;
}
.bit-4-tabs {
width: 25%;
padding:10px;
}
.bit-5 {
width: 20%;
}
.bit-5-tabs {
width: 20%;
padding:10px;
}
.bit-6 {
width: 16.66667%;
padding: .3em;
}
.bit-7 {
width: 14.28571%;
}
.bit-8 {
width: 12.5%;
}
.bit-9 {
width: 11.11111%;
}
.bit-10 {
width: 10%;
}
.bit-11 {
width: 9.09091%;
}
.bit-12 {
width: 8.33333%;
}
.bit-25 {
width: 25%;
}
.bit-40 {
width: 40%;
}
.bit-60 {
width: 60%;
}
.bit-75 {
width: 75%;
}
.bit-35 {
width: 35%;
padding: 20px;
}
.bit-65 {
width: 65%;
padding: 20px;
}
/* Laptop */
@media (min-width:50em) and (max-width:68.75em) {
.bit-7 {
width: 100%;
}
.bit-10, .bit-12, .bit-4, .bit-8 {
width: 50%;
}
}
/* Tablet */
@media (min-width:30em) and (max-width:50em) {
.bit-10, .bit-12, .bit-4, .bit-6, .bit-8 {
width: 50%;
}
.bit-1, .bit-11, .bit-3, .bit-5, .bit-7, .bit-9 {
width: 100%;
}
}
/* Mobile */
@media (max-width:30em) {
.bit-1, .bit-10, .bit-11, .bit-12, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6, .bit-7, .bit-8, .bit-9, .bit-35, .bit-65 {
width: 100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
.bit-5-tabs, .bit-4-tabs {width:50%;padding:5px;}
.storytext {margin-left:15px;}
.storytextcenter {margin-left:0px;}
.bottomlinespacing {margin-bottom:20px;}
.subtitle {
font-size:20px !important;
margin-top: 1em !important;
}
.fancy span { margin-top:1.5em !important;}
}
/* -------------------------
End OBSW Grid System */
/* Full Width Wrapper
---------------------------- */
.fullwidthwrapper {
width: 100%;
padding-top: 150px;
}
@media (max-width:991px) {
.fullwidthwrapper {
padding-top: 5px;
}
}
@media (max-width:907px) {
.fullwidthwrapper {
padding-top: 5px;
line-height: 42px;
}
}
/* -------------------------
End Full Width Wrapper */
/* Header Slider
---------------------------- */
.hpfullwidth-top {
background-color: #fff;
background-repeat: repeat;
padding-top: 150px;
}
@media (max-width:991px) {
.hpfullwidth-top {
padding-top: 5px;
}
}
.imageholder {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------
End Header Slider */
/* Image Hover
---------------------------- */
.fade {
opacity: 1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
fade:hover {
opacity: 0.5;
}
/* -------------------------
End Image Hover */
.storytext {
margin-top:15px;
line-height:20px;
}
.storytextcenter {
margin-top:15px;
line-height:20px;
}
.firstline {
font-family:proxima_nova_rgbold, serif;
font-size:20px;
color:#000;
}
.secondline {
font-family:'proxima_nova_rgregular', serif;
font-size:14px;
color:#000;
}
.thirdline {
font-family:proxima_nova_rgbold, serif;
font-size:14px;
color:#000;
border-bottom: solid 2px #000000;
display: inline;
padding-bottom: 2px;
}
.bottomlinespacing {
margin-bottom:0px;
}
.subtitle {
margin: 1.5em 0 .3em 0;
font-size:35px;
letter-spacing:5px;
}
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
.tabbedcontainer {
width: 100%;
margin: 0 auto;
}
ul.tabs {
margin-top: 1em;
padding: 0px;
list-style: none;
text-align:center;
}
ul.tabs li {
background: none;
color: #000;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #fff;
color: #000;
text-decoration:underline;
font-family:proxima_nova_rgbold, serif;
font-weight:bold;
}
.tab-content {
display: none;
background: #fff;
}
.tab-content.current {
display: inherit;
}
.swiper-container {
width: 100%;
height: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
position: relative;
}
/* Auto Height */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform, height;
}
/* Pagination Styles */
.swiper-pagination {
position: relative;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0;
margin-top: 5px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullet {
width: 10px;
height: 10px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
margin: 5px;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: black;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: black;
opacity: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
-webkit-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>
<!-- Start Body Content -->
<div class="fullwidthwrapper">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- SLIDE 1 -->
<div class="swiper-slide" data-swiper-autoplay="2000">
<picture>
<source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
<source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
<!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
<!-- END -->
<!-- SLIDE 2 -->
<div class="swiper-slide" data-swiper-autoplay="2000">
<picture>
<source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
<source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
<!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
<!-- END -->
<!-- SLIDE 2 -->
<div class="swiper-slide" data-swiper-autoplay="2000">
<picture>
<source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
<source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
<!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
<!-- END -->
</div>
<div class="heightissue" style="height:18px; width:100%;"> </div>
</div>
<div class="swiper-pagination"> </div>
<div class="bit-1">
<div class="bit-3">
<img src="https://s17.postimg.org/lfnazyidb/nike1.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP RUNNING</span><br>
<span class="secondline">Starting at $59.99</span>
<div class="bottomlinespacing"><span class="thirdline">SHOP NOW</span></div>
</div>
</div>
<div class="bit-3">
<img src="https://s17.postimg.org/b4ay7aqnz/nike2.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP TRAINING</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-3">
<img src="https://s17.postimg.org/qoibxu0sf/nike3.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;">
<div class="imageholder">
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">WOMEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">MEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
</div>
<div class="bit-1" style="margin-bottom:40px;">
<p class="subtitle fancy"><span>ATHLETIC<font style="font-family:proxima_nova_rgbold, serif;">REPORT</font>2017</span></p>
<div class="tabbedcontainer">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Women's</li>
<li class="tab-link" data-tab="tab-2">Men's</li>
<li class="tab-link" data-tab="tab-3">Girls'</li>
<li class="tab-link" data-tab="tab-4">Boys'</li>
</ul>
<div id="tab-1" class="tab-content current">
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div id="tab-2" class="tab-content">
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div id="tab-3" class="tab-content">
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div id="tab-4" class="tab-content">
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
</div>
</div>
<div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;">
<div class="imageholder">
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">WOMEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">MEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
</div>
</div>
<!-- End Body Content -->谢谢!
最佳答案
从类“bit-3”中删除填充。
关于javascript - 如何使 slider 移动到页面的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41679013/