swiper 반응형

</p>

<p><style>

.swiper-container {

width: 60%;

height: 100%;

}</p>

<p>.swiper-slide {

text-align: center;

font-size: 18px;

background: #fff;</p>

<p>/* 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;

}</p>

<p>.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></p>

<p><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></p>

<p><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></p>

<p>