[前端] 滑動導航套件: Swiper

日期：
Swiper 4
https://github.com/nolimits4web/swiper

Swiper web
https://idangero.us/swiper/

Swiper(中文) web
https://www.swiper.com.cn/

Swiper cubeEffect demo
https://www.swiper.com.cn/api/effects/195.html

Swiper coverflowEffect
https://www.swiper.com.cn/api/effects/196.html

Swiper是純javascript打造的滑動特效外掛程式，開源、免費、穩定、使用簡單且功能強大，面向手機、平板電腦等移動終端。Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換、3D切換等常用效果，且擁有豐富的API，允許建立自己獨特的分頁器、導航、視差滾動、或其他精彩的效果。

此外，Swiper無需載入任何公共庫（如jquery）即可運行，這保證了Swiper的輕量和運行速度。Swiper也可以在載入了公共庫的環境下安全的運行，如jQuery、Zepto、jQuery Mobile等。


以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Swiper Demo</title>

    <!--使用Swiper-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

    <style>
        .swiper-slide {
          background-position: center;
          background-size: cover;
        }
    </style>

</head>
<body>

    <div id="app" style="padding:50px;">

        <div class="swiper-container" style="width: 300px; height: 300px;">
          
          <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
          </div>

          <div class="swiper-pagination"></div>
          
        </div>

    </div>

    <script>

        let swiper = new Swiper(
          '.swiper-container', 
          {
            effect: 'cube',
            grabCursor: true,
            cubeEffect: {
              shadow: true,
              slideShadows: true,
              shadowOffset: 20,
              shadowScale: 0.94,
            },
            pagination: {
              el: '.swiper-pagination',
            },
          }
        );

    </script>

</body>
</html>



載入後畫面為︰



#Javascript, Swiper, 滑動, 特效, 導航, 視差滾動, 套件

留言

張貼留言