swiper 반응형

swiper 반응형

QA

swiper 반응형

본문


<style>
.swiper-container {
width: 60%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
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;
}
.swiper-slide{}
.swiper-slide img:last-child{display:none;}
.swiper-slide:hover img:first-child{display:none;}
.swiper-slide:hover img:last-child{display:inline-block;}
</style>
<div class="swiper-container mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><a href="#">1<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
    <div class="swiper-slide"><a href="#">2<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
    <div class="swiper-slide"><a href="#">3<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
    <div class="swiper-slide"><a href="#">4<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
    <div class="swiper-slide"><a href="#">5<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
    <div class="swiper-slide"><a href="#">6<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
    <div class="swiper-slide"><a href="#">7<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
    <div class="swiper-slide"><a href="#">8<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
    <div class="swiper-slide"><a href="#">9<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
  </div>
  <div style="margin:25px 0px;"></div>
  <div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
    el: ".swiper-pagination",
    clickable: true,
    },
    autoplay: {
    delay: 2500,
    disableOnInteraction: false,
    },
    breakpoints: {
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        1024: {
          slidesPerView: 5,
          spaceBetween: 50,
        },
      }
});
</script>

 

 

swiper 반응형으로 하려고 "breakpoints:" 추가하였는데도

안됩니다 ㅠㅠ 어떻게 수정해야 될까요?ㅠㅠ

 

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 364
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT