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>