오시는길 옆에 회색부분 여백이 없어지질 않습니다 ㅠㅠ
해당 부분도 25%로 맞게 설정되어 있는거같은데...
도움 부탁드립니다 .ㅠㅠ
Copy
<!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>답변 1개 / 댓글 1개
채택된 답변
+20 포인트
logos
2017-08-02 (수) 18:05:03
CSS 를 아래처럼 변경해 보세요
tabs > li { width: 25% !important; }
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.