0
Я все время играю с этим кодом, пытаясь сделать этот слайдер 100% браузером. Я использую слайдер swiper, если это помогает? Я приложил свой код ниже для справки.Как сделать слайдер 100% страницы
Если вы просматриваете код в полноэкранном режиме, слайдер, похоже, попадает в исходный размер изображения и не подходит к краю окна, как и остальные истории. Любые предложения будут рассмотрены.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
\t \t initialSlide: 0,
\t \t slidesPerView: 1,
spaceBetween: 20,
centeredSlides: true,
autoplay: 2000,
autoplayDisableOnInteraction: false
});/* Making Thing Pretty
---------------------------- */
* {
\t margin: 0;
\t padding: 0;
\t box-sizing: border-box;
}
.opencanvascontainer {
\t margin: 0 auto;
\t max-width: 1140px;
}
[class*=bit-] {
\t float: left;/*padding:.3em;*/
\t position:relative;
}
/* OBSW Grid System
---------------------------- */
.box {
\t text-align: center;
\t border: solid 1px black;
\t color: #000;
\t font-size: 12px;
\t font-family: 'proxima_nova_rgregular', sans-serif;
\t padding: 15px 10px 15px 10px;
}
.bit-1 {
\t width: 100%;
}
.bit-2 {
\t width: 50%;
\t padding: 20px;
}
.bit-3 {
\t width: 33.33333%;
\t padding: 20px;
}
.bit-4 {
\t width: 25%;
}
.bit-4-tabs {
\t width: 25%;
\t padding:10px;
}
.bit-5 {
\t width: 20%;
}
.bit-5-tabs {
\t width: 20%;
\t padding:10px;
}
.bit-6 {
\t width: 16.66667%;
\t padding: .3em;
}
.bit-7 {
\t width: 14.28571%;
}
.bit-8 {
\t width: 12.5%;
}
.bit-9 {
\t width: 11.11111%;
}
.bit-10 {
\t width: 10%;
}
.bit-11 {
\t width: 9.09091%;
}
.bit-12 {
\t width: 8.33333%;
}
.bit-25 {
\t width: 25%;
}
.bit-40 {
\t width: 40%;
}
.bit-60 {
\t width: 60%;
}
.bit-75 {
\t width: 75%;
}
.bit-35 {
\t width: 35%;
\t padding: 20px;
}
.bit-65 {
\t width: 65%;
\t padding: 20px;
}
/* Laptop */
@media (min-width:50em) and (max-width:68.75em) {
.bit-7 {
\t width: 100%;
}
.bit-10, .bit-12, .bit-4, .bit-8 {
\t width: 50%;
}
}
/* Tablet */
@media (min-width:30em) and (max-width:50em) {
.bit-10, .bit-12, .bit-4, .bit-6, .bit-8 {
\t width: 50%;
}
.bit-1, .bit-11, .bit-3, .bit-5, .bit-7, .bit-9 {
\t 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 {
\t width: 100%;
\t 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 {
\t width: 100%;
\t padding-top: 150px;
}
@media (max-width:991px) {
.fullwidthwrapper {
\t padding-top: 5px;
}
}
@media (max-width:907px) {
.fullwidthwrapper {
\t padding-top: 5px;
\t line-height: 42px;
}
}
/* -------------------------
End Full Width Wrapper */
/* Header Slider
---------------------------- */
.hpfullwidth-top {
\t background-color: #fff;
\t background-repeat: repeat;
\t padding-top: 150px;
}
@media (max-width:991px) {
.hpfullwidth-top {
\t padding-top: 5px;
}
}
.imageholder {
\t max-width: 1500px;
\t margin: 0 auto;
}
/* -------------------------
End Header Slider */
/* Image Hover
---------------------------- */
.fade {
\t opacity: 1;
\t transition: opacity .5s ease-in-out;
\t -moz-transition: opacity .5s ease-in-out;
\t -webkit-transition: opacity .5s ease-in-out;
}
fade:hover {
\t opacity: 0.5;
}
/* -------------------------
End Image Hover */
.storytext {
\t margin-top:15px;
\t line-height:20px;
}
.storytextcenter {
\t margin-top:15px;
\t line-height:20px;
}
.firstline {
\t font-family:proxima_nova_rgbold, serif;
\t font-size:20px;
\t color:#000;
}
.secondline {
\t font-family:'proxima_nova_rgregular', serif;
\t font-size:14px;
\t color:#000;
}
.thirdline {
\t font-family:proxima_nova_rgbold, serif;
\t font-size:14px;
\t color:#000;
\t border-bottom: solid 2px #000000;
display: inline;
padding-bottom: 2px;
}
.bottomlinespacing {
\t 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 {
\t width: 100%;
\t height: auto;
}
.swiper-slide {
\t text-align: center;
\t font-size: 18px;
\t background: #fff;
\t /* Center slide text vertically */
\t display: -webkit-box;
\t display: -ms-flexbox;
\t display: -webkit-flex;
\t display: flex;
\t -webkit-box-pack: center;
\t -ms-flex-pack: center;
\t -webkit-justify-content: center;
\t justify-content: center;
\t -webkit-box-align: center;
\t -ms-flex-align: center;
\t -webkit-align-items: center;
\t align-items: center;
}
.swiper-container {
\t margin: 0 auto;
\t position: relative;
\t overflow: hidden;
\t /* Fix of Webkit flickering */
\t z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
\t float: left;
}
.swiper-container-vertical > .swiper-wrapper {
\t -webkit-box-orient: vertical;
\t -moz-box-orient: vertical;
\t -ms-flex-direction: column;
\t -webkit-flex-direction: column;
\t flex-direction: column;
}
.swiper-wrapper {
\t position: relative;
\t width: 100%;
\t z-index: 1;
\t display: -webkit-box;
\t display: -moz-box;
\t display: -ms-flexbox;
\t display: -webkit-flex;
\t display: flex;
\t -webkit-transition-property: -webkit-transform;
\t -moz-transition-property: -moz-transform;
\t -o-transition-property: -o-transform;
\t -ms-transition-property: -ms-transform;
\t transition-property: transform;
\t -webkit-box-sizing: content-box;
\t -moz-box-sizing: content-box;
\t box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
\t -webkit-transform: translate3d(0px, 0, 0);
\t -moz-transform: translate3d(0px, 0, 0);
\t -o-transform: translate(0px, 0px);
\t -ms-transform: translate3d(0px, 0, 0);
\t transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
\t -webkit-box-lines: multiple;
\t -moz-box-lines: multiple;
\t -ms-flex-wrap: wrap;
\t -webkit-flex-wrap: wrap;
\t flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
\t -webkit-transition-timing-function: ease-out;
\t -moz-transition-timing-function: ease-out;
\t -ms-transition-timing-function: ease-out;
\t -o-transition-timing-function: ease-out;
\t transition-timing-function: ease-out;
\t margin: 0 auto;
}
.swiper-slide {
\t -webkit-flex-shrink: 0;
\t -ms-flex: 0 0 auto;
\t flex-shrink: 0;
\t width: 100%;
\t position: relative;
}
/* Auto Height */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
\t height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
\t -webkit-box-align: start;
\t -ms-flex-align: start;
\t -webkit-align-items: flex-start;
\t align-items: flex-start;
\t -webkit-transition-property: -webkit-transform, height;
\t -moz-transition-property: -moz-transform;
\t -o-transition-property: -o-transform;
\t -ms-transition-property: -ms-transform;
\t transition-property: transform, height;
}
/* Pagination Styles */
.swiper-pagination {
\t position: relative;
\t text-align: center;
\t -webkit-transition: 300ms;
\t -moz-transition: 300ms;
\t -o-transition: 300ms;
\t transition: 300ms;
\t -webkit-transform: translate3d(0, 0, 0);
\t -ms-transform: translate3d(0, 0, 0);
\t -o-transform: translate3d(0, 0, 0);
\t transform: translate3d(0, 0, 0);
\t z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
\t opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
\t bottom: 0;
\t margin-top: 5px;
\t left: 0;
\t width: 100%;
}
/* Bullets */
.swiper-pagination-bullet {
\t width: 10px;
\t height: 10px;
\t display: inline-block;
\t border-radius: 100%;
\t background: #000;
\t opacity: 0.2;
\t margin: 5px;
}
button.swiper-pagination-bullet {
\t border: none;
\t margin: 0;
\t padding: 0;
\t box-shadow: none;
\t -moz-appearance: none;
\t -ms-appearance: none;
\t -webkit-appearance: none;
\t appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
\t cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
\t background: #fff;
}
.swiper-pagination-bullet-active {
\t opacity: 1;
\t background: black;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
\t background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
\t background: black;
\t opacity: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
\t margin: 0 5px;
}
/* Preloader */
.swiper-lazy-preloader {
\t width: 42px;
\t height: 42px;
\t position: absolute;
\t left: 50%;
\t top: 50%;
\t margin-left: -21px;
\t margin-top: -21px;
\t z-index: 10;
\t -webkit-transform-origin: 50%;
\t -moz-transform-origin: 50%;
\t transform-origin: 50%;
\t -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
\t -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
\t animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
\t display: block;
\t content: "";
\t width: 100%;
\t height: 100%;
\t 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");
\t background-position: 50%;
\t -webkit-background-size: 100%;
\t background-size: 100%;
\t background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
\t 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 -->Спасибо!
Я бы рекомендовал уменьшить этот код до абсолютного минимума. – evolutionxbox