Swiper紹介

公式サイトhttps://www.swiper.com.cn/download/index.html#file1から必要なリソースをダウンロードしてください1.

2.はじめswiper.min.css <head>のプロジェクトで

<！ -リンクSwiper」のCSS - > 
  <リンクのrel = "スタイルシート"のhref = "../ DIST / CSS / swiper.min.css">

3.編集スケルトンコード

  <！ - Swiper - > 
  <divのクラス= "swiperコンテナ"> 
    <DIV CLASS = "swiper-ラッパー"> 

      <DIV CLASS = "swiperスライド"> <IMG SRC =」../ IMG / BG01。 PNG "ALT = ""> </ div> 
      <divのクラス= "swiperスライド"> <IMG SRC =" ../ IMG / bg02.png "ALT = ""> </ div> 
      <divのクラス=" swiper -slide "> <IMG SRC =" ../ IMG / bg03.png」ALT = ""> </ div> 

    </ div> 
    <！ -ページネーションを追加- > 
    <divのクラス= "swiper-ページネーションを"> </ div> 
    <！ -矢印を追加します- > 
    <divのクラス= "swiperボタン-次の"> </ div> 
    <divのクラス=」swiperボタン-PREV "> </ div> 
  </ div>

<BODY> 4.次のコードフレームswiper.min.jsに導入され

<！ - Swiper JS - > 
  <スクリプトSRC = "../ DIST / JS / swiper.min.js"> </ SCRIPT>

5.初期化swiper

< - -初期化Swiper！> 
  <スクリプト> のvar swiper = 新しい Swiper（ 'swiperコンテナ' 、{ 
      spaceBetween： 30 、
      centeredSlides：真、
      自動再生：{ 
        遅延： 2500 、
        disableOnInteraction：偽、
      }、
      ページネーション：{ 
        ：EL '.swiper-ページネーション' 、
        クリッカブル：真、
      }、
      ナビゲーション：{ 
        ネクステル： 'ボタン、次.swiper' 、
        prevEl： '.swiperボタン、PREV'
    、
      } 
    }）。
  </ SCRIPT>

最終的なコード：

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
  <メタのcharset = "UTF-8"> 
  <タイトル> Swiperデモ</ TITLE> 
  <META NAME = "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1、最小規模= 1、最大規模= 1" > 

  <！ -リンクSwiper」のCSS - > 
  <リンクのrel = "スタイルシート"のhref =」../ DIST / CSS / swiper .min.css "> 
  
  < -デモのスタイル- >！
  <スタイル> 
    HTML、身体{ 
      位置：相対; 
      高さ：100％; 
    } 
    体{ 
      背景：#eee。
      フォントファミリ：ヘルベチカノイエ、ヘルベチカ、ゴシック、サンセリフ; 
      フォントサイズ：14px; 
      色：＃000; 
      マージン：0; 
      パディング：0;
    }
      ALIGN-アイテム：センター;
    .swiper容器{ 
      幅：100％。
      高さ：100％; 

    } 
    .swiperスライド{ 
      テキスト整列：センター。
      フォントサイズ：18px; 
      背景：#FFF; 

      / *センタースライドのテキストを縦* / 
      表示：-webkit-ボックス。
      表示：-ms-フレキシボックス。
      表示：-webkit-フレックス; 
      表示：フレックス。
      -webkit-箱パック：センター; 
      -ms-フレックスパック：センター; 
      -webkit-正当化-コンテンツ：センター; 
      正当化-コンテンツ：センター; 
      -webkit-ボックス整列：センター; 
      -ms-フレックス整列：センター; 
      -webkit-ALIGN-アイテム：センター; 
    } 
  </スタイル> 
</ HEAD> 
<BODY> 
  <！ - Swiper - > 
  <divのクラス= "swiperコンテナ"> 
    <DIV CLASS = "swiper-ラッパー"> 

      <DIV CLASS = "swiperスライド"> <IMG SRC = "../ IMG / bg01.png" ALT = ""> </ div> 
      <divのクラス= "swiperスライド"> <IMG SRC = "../ IMG / bg02.png" ALT =」 "> </ div> 
      <divのクラス=" swiperスライド"> <IMG SRC =" ../ IMG / bg03.png」ALT = ""> </ div> 

    </ div> 
    <！ -ページネーションを追加- - > 
    <divのクラス= "swiper-ページネーション"> </ div> 
    <！ -矢印を追加- > 
    <DIV CLASS = "swiperボタン-次の"> </ div> 
    <divのクラス= "swiperボタン-PREV"> </ div> 
  </ div> 

  <！ - Swiper JS - > 
  <スクリプトSRC =」。 ./dist/js/swiper.min.js "> </ SCRIPT>

  < - -初期化Swiper！>
  <スクリプト> 
    のvar swiper =新しいSwiper（ '.swiperコンテナ' 、{ 
      spaceBetween：30、
      centeredSlides：真、
      自動再生：{ 
        遅延：2500、
        disableOnInteraction：偽、
      }、
      ページネーション：{ 
        EL： '.swiper-ページネーション' 、
        クリッカブル：真
      }、
      ナビゲーション：{ 
        NEXTEL： '.swiperボタン-NEXT' 、
        prevEl： '.swiperボタン-PREV' 、
      } 
    }）。
  </スクリプト> 
</ BODY> 
</ HTML>

コードの表示

おすすめ