GMO MakeShopのスマホサイトで「Swiper」というスライダーを使ってみた スワイプ可能

このサイトを参考に導入

https://www.willstyle.co.jp/blog/724/

①まずヘッダーに

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">

②トップ画面に

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
 
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

③フッターに

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
effect: "flip",
    loop: true,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
autoplay: '1000',
    })
</script>

勝手にスライドさせたかったのでautoplayを1000で追加した

1000=1秒

導入したサイトはコチラ

https://www.takumikaki.com/smartphone/

ちなみに原因は追究していないが楽天GOLDで使用した場合、何故か縦幅がものすごく伸びたのでheightを設定した