여백이 안없어져요...
관련링크
본문
오시는길 옆에 회색부분 여백이 없어지질 않습니다 ㅠㅠ
해당 부분도 25%로 맞게 설정되어 있는거같은데...
도움 부탁드립니다 .ㅠㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="swiper.css">
<!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
overflow-x: hidden;
}
ul, li {list-style-type:none;margin:0;padding:0;}
.tabs > li { width: 25%; }
.tabs > li > a { color: #666; padding: 22px 0 20px 0; display: block; background: #fff; text-align: center; text-decoration: none; font-size: 15px; line-height: 20px; border-bottom: 2px solid transparent; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.tabs > li.active > a { border-bottom: 2px solid #cc0066; color: #cc0066; }
/* 2016-05-13 수정 */
.swiper-container-2 { overflow: hidden; }
.swiper-container-2 .swiper-slide { background:#fff; border:1px dashed #ccc; padding: 20px 15px; font-size: 20px; box-sizing: border-box; }
/* //2016-05-13 수정 */
#footer{background:pink;padding:20px 15px;font-size:16px;}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<ul class="swiper-wrapper tabs">
<li class="swiper-slide active"><a href="#">홈</a></li>
<li class="swiper-slide"><a href="#">업체정보</a></li>
<li class="swiper-slide"><a href="#">메뉴안내</a></li>
<li class="swiper-slide"><a href="#">오시는길</a></li>
</ul>
</div>
<div class="swiper-container-2">
<div class="swiper-wrapper">
<div class="swiper-slide">홈이야~</div>
<div class="swiper-slide">업체정보일껄</div>
<div class="swiper-slide">ㅁㄴ</div>
<div class="swiper-slide">ㅇㅅㄴㄱ</div>
</div>
</div>
<div id="footer">
Footer 영역
</div>
<!-- Swiper JS -->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper_1 = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 5,
paginationClickable: true,
spaceBetween: 0,
freeMode: true,
pagination: false
});
$('.tabs > li > a').on('click', function(e){
$(this).parent().addClass('active').siblings().removeClass('active');
var tabIdx = $(this).parent().index();
swiper_2.slideTo(tabIdx+1, 300);
e.preventDefault();
});
var tabLen = $('.tabs > li').length;
/* 2016-05-13 수정 */
var swiper_2 = new Swiper('.swiper-container-2', {
autoHeight: true,
slidesPerView: 1,
spaceBetween: 0,
pagination: false,
loop: true,
onInit: function(swiper){
},
onSlideChangeStart: function(swiper){
var idx = swiper.activeIndex-1;
if( idx < 0 ) {
idx = tabLen - 1;
} else if( idx == tabLen ){
idx = 0;
}
$('.tabs > li').removeClass('active').eq(idx).addClass('active');
if( idx < tabLen ) {
swiper_1.slideTo(idx-1, 300);
}
}
});
/* //2016-05-13 수정 */
</script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
