그누보드 QA - swiper 슬라이드와 css 충돌? 문의입니다.

swiper 슬라이드와 css 충돌? 문의입니다.

달려날아 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2017.12.21 15:47:25 조회 8370 (14.♡.♡.48)

본문

swiper 슬라이드를 사용 중입니다. http://idangero.us/swiper/

한페이지에 똑같은 슬라이드를 여러개 써도 작동이 잘되는것을 확인했습니다.

그런데 아래 소스와 같이 탭으로 구분해서 넣으니 두번째 탭으로 가면 작동을 안하다가 브라우져 창크기를 변경하면 작동을 합니다. 뭐부터 봐야할지 감도 안와서 질문 남깁니다.


<style>
.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;
}
.css3-tab-content h1 {color:#b7856d;}
.css3-tab-content h3 {color:#2d3f51;}
.css3-tab-content a {color:#fff; width:100%;}
 
    .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>

<link rel="stylesheet" href="../skin/content/sub16/dist/css/swiper.min.css">

        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    
<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">
        <div class="css3-tab-nav">
                <label for="tabOne">E 책자</label>
                <label for="tabTwo">E 놀이</label>
        </div>
        <div class="css3-tab-content tab-one">
                <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>
 
                </div>
        </div>
        <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>

                        </div>
                        </div>

</div>
                </div>
                </div>
</div>

  <!-- Swiper JS -->
  <script src="../skin/content/sub16/dist/js/swiper.min.js"></script>
  <!-- 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>