swiperは簡単に使います

7484 ワード

javascript swiper

Swiperはモバイル端末のウェブサイトの内容によく使われています.タッチスライドSwiperは純javascriptが作ったスライド効果プラグインで、携帯電話、タブレットなどのモバイル端末に向いています.Swiperはタッチパネルの焦点図、タッチパネルのTab切り替え、タッチスクリーンの多図切り替えなどの常用効果を実現できます.Swiperオープンソース、無料、安定、使い勝手が簡単、機能が強大で、モバイル端末サイトを構築する重要な選択です.
Swiperの使い方
1.まずプラグインをロードし、必要なファイルはswiper.min.jsとswiper.min.cssファイルがあります.


<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
head>
<body>
    ...
    <script src="path/to/swiper.min.js">script>
body>
html>

もしあなたのページにjQuery.jsまたはzept.jsをロードしたら、もっと軽いswiper.jquery.min.jsを使うことができます.


<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
head>
<body>
    ...
    <script src="path/to/jquery.js">script>
    <script src="path/to/swiper.jquery.min.js">script>
body>
html>

2.HTML内容

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1div>
        <div class="swiper-slide">Slide 2div>
        <div class="swiper-slide">Slide 3div>
    div>
    
    <div class="swiper-pagination">div>

    
    <div class="swiper-button-prev">div>
    <div class="swiper-button-next">div>

    
    <div class="swiper-scrollbar">div>
div>

ナビゲーションなどのコンポーネントはcontainerの外に置くことができます.Swiperにサイズを定義したいかもしれません.もちろん要らなくてもいいです.

.swiper-container {
    width: 600px;
    height: 300px;
}

4.初期化Swiper:ラベルをつけたほうがいいです.

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,

    //        
    pagination: '.swiper-pagination',

    //           
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    //        
    scrollbar: '.swiper-scrollbar',
  })        
  script>
body>

HTMLの内容の後ろに書いてはいけないなら、ページの読み込みが完了したら初期化する必要があります.

"text/javascript"</span>>
window.onload = <span class="hljs-keyword">function</span>() {
  <span class="hljs-keyword">...</span>
}

    （Jquery Zepto）

"text/javascript"</span>>
$(document).ready(<span class="hljs-keyword">function</span> () {
 <span class="hljs-keyword">...</span>
})

5.完了しました.おめでとうございます.今はSwiperが正常に切り替わりました.

JavaScriptブラウザを越えたイベント関数の最適化