swiper 슬라이드와 css 충돌? 문의입니다. 채택완료
달려날아
7년 전
조회 9,264
swiper 슬라이드를 사용 중입니다. http://idangero.us/swiper/">http://idangero.us/swiper/
한페이지에 똑같은 슬라이드를 여러개 써도 작동이 잘되는것을 확인했습니다.
그런데 아래 소스와 같이 탭으로 구분해서 넣으니 두번째 탭으로 가면 작동을 안하다가 브라우져 창크기를 변경하면 작동을 합니다. 뭐부터 봐야할지 감도 안와서 질문 남깁니다.
</p>
<p><style></p>
<p>.css3-tab {
list-style: none;
position: relative;
width: 100%;
}
.css3-tab input[type='radio'] {
display: none;
}
.css3-tab .css3-tab-nav {
display: table;
table-layout: fixed;
width: 100%;
}
.css3-tab .css3-tab-nav label {
font-size:18px;
display: table-cell;
background-color: #9a9a9a;
color: #FFFFFF;
padding: 15px;
text-align: center;
transition: all .3s ease 0s;
border-right: 1px solid #fff;
}
.css3-tab .css3-tab-nav label:hover {
cursor: pointer;
background: white;
color: #9a9a9a;
transition: all .3s ease 0s;
}
@media (max-width: 692px) {
.css3-tab .css3-tab-nav {
display: block;
margin: 0 0 20px;
}
.css3-tab .css3-tab-nav label {
display: block;
box-sizing: border-box;
width: 100%;
padding: 20px;
}
.css3-tab .css3-tab-nav a {
display: block;
box-sizing: border-box;
width: 100%;
padding: 20px;
}
}
.css3-tab .css3-tab-content {
overflow: hidden;
padding-top: 30px;
display: none;
background: #FFF;
clear: left;
box-sizing: border-box;
}
.css3-tab input[id='tabOne']:checked ~ .css3-tab-nav label[for='tabOne'] {
font-size:18px;
background: #408fde;
color: #fff;
cursor: default;
}
.css3-tab input[id='tabOne']:checked ~ div.tab-one {
display: block;
border-top: solid 3px #408fde;
}
.css3-tab input[id='tabTwo']:checked ~ .css3-tab-nav label[for='tabTwo'] {
font-size:18px;
background: #408fde;
color: white;
cursor: default;
}
.css3-tab input[id='tabTwo']:checked ~ div.tab-two {
display: block;
border-top: solid 3px #408fde;
}</p>
<p>.css3-tab-content h1 {color:#b7856d;}
.css3-tab-content h3 {color:#2d3f51;}
.css3-tab-content a {color:#fff; width:100%;}</p>
<p> </p>
<p> .swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
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;
}
</style></p>
<p>
<link rel="stylesheet" href="../skin/content/sub16/dist/css/swiper.min.css"></p>
<p>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
</p>
<p><div class="css3-tab">
<input name="a" tabindex="1" id="tabOne" onclick="div_OnOff(this.value,'con');" type="radio" checked="" value="1">
<input name="a" tabindex="2" id="tabTwo" onclick="div_OnOff(this.value,'con');" type="radio" value="2"></p>
<p> <div class="css3-tab-nav"></p>
<p> <label for="tabOne">E 책자</label>
<label for="tabTwo">E 놀이</label>
</div></p>
<p> <div class="css3-tab-content tab-one"></p>
<p> <div class="col-md-12 col-sm-12" style="padding:0px;">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../skin/content/sub16/img/Brochure1.jpg" data-u="image"></div>
<div class="swiper-slide"><img src="../skin/content/sub16/img/Brochure2.jpg" data-u="image"></div>
<div class="swiper-slide"><img src="../skin/content/sub16/img/Brochure3.jpg" data-u="image"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
</div></p>
<p> </p>
<p> </div>
</div></p>
<p> <div class="css3-tab-content tab-two">
<!-- start slipsum code -->
<div class="col-md-12 col-sm-12" style="padding:0px;">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-1.jpg" data-u="image"></div>
<div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-2.jpg" data-u="image"></div>
<div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-3.jpg" data-u="image"></div>
<div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-4.jpg" data-u="image"></div>
<div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-5.jpg" data-u="image"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div></p>
<p>
</div>
</div></p>
<p>
</div></p>
<p> </div>
</div></p>
<p></div></p>
<p>
<!-- Swiper JS -->
<script src="../skin/content/sub16/dist/js/swiper.min.js"></script></p>
<p> <!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 2개
�
달려날아
7년 전
�
달려날아
7년 전
height:0px; 만 주니까 되네요;; 감사합니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
visibility 로 인한 공백을 width:0px; height:0px; 로 잡으니 display 사용할때와 동일하게
작동하지 않네요 ㅜㅜ