モバイル端末上のコンテンツに基づいたSwiper 4.xのタッチおよびスライド機能の実装-jsチュートリアル-php.cn

モバイル端末上のコンテンツに基づいたSwiper 4.xのタッチおよびスライド機能の実装

php中世界最好的语言

リリース： 2018-05-28 15:46:52

オリジナル

2248 人が閲覧しました

今回は、Swiper 4 の内容に基づいたタッチとスライド機能の実装をお届けします。立ち上がって見てください。 Swiper は、

javascript

だけで作成されたスライド特殊効果プラグインで、携帯電話、タブレット、その他のモバイル端末を対象としています。スワイパーは、タッチスクリーンのフォーカス画像、タッチスクリーンのタブ切り替え、タッチスクリーンのマルチ画像切り替えなどの一般的な効果を実現できます。

Swiper はオープンソースで、無料で、安定していて、使いやすく、強力です。モバイル端末の Web サイトを構築するには重要な選択肢です。

1. まず、プラグインをロードします。必要なファイルは swiper.min.js および swiper.min.css ファイルです。 Swiper ファイルをダウンロードするか、CDN を使用できます。

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

ログイン後にコピー

2.HTMLコンテンツ。

<p class="swiper-container">
  <p class="swiper-wrapper">
    <p class="swiper-slide">Slide 1</p>
    <p class="swiper-slide">Slide 2</p>
    <p class="swiper-slide">Slide 3</p>
  </p>
  <!-- 如果需要分页器 -->
  <p class="swiper-pagination"></p>
  
  <!-- 如果需要导航按钮 -->
  <p class="swiper-button-prev"></p>
  <p class="swiper-button-next"></p>
  
  <!-- 如果需要滚动条 -->
  <p class="swiper-scrollbar"></p>
</p>
导航等组件可以放在container之外

ログイン後にコピー

3. Swiper のサイズを定義したいかもしれませんが、もちろんそうではありません。

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

ログイン後にコピー

4. スワイパーの初期化: タグの隣に配置するのが最適です。

<script>    
 var mySwiper = new Swiper ('.swiper-container', {
  direction: 'vertical',
  loop: true,
  
  // 如果需要分页器
  pagination: {
   el: '.swiper-pagination',
  },
  
  // 如果需要前进后退按钮
  navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev',
  },
  
  // 如果需要滚动条
  scrollbar: {
   el: '.swiper-scrollbar',
  },
 })    
 </script>
</body>

ログイン後にコピー

HTML コンテンツの後ろに記述できない場合は、ページが読み込まれた後に初期化する必要があります (推奨されません)。。

<script type="text/javascript">
window.onload = function() {
 ...
}
</script>

ログイン後にコピー

または次のようにします (

Jquery

と Zepto)

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングな内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Webpack + React 開発環境を構築する方法

React ファミリーバケット環境を構築する方法

以上がモバイル端末上のコンテンツに基づいたSwiper 4.xのタッチおよびスライド機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。