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