swiper

ホームページ

ウェブフロントエンド

jsチュートリアル

Swiper プラグインの概要と画像をカルーセル表示する方法

PHP中文网

Jun 19, 2017 pm 05:23 PM

swiper どうやってプラグイン導入

swiper

Swiper は、純粋な JavaScript で作成された、携帯電話、タブレット、その他のモバイル端末向けのスライド特殊効果プラグインです。

スワイパーは、タッチスクリーンのフォーカス画像、タッチスクリーンのタブ切り替え、タッチスクリーンのマルチ画像切り替えなどの一般的な効果を実現できます。

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

1. まず、swiper.min.js ファイルと swiper.min.css ファイルを作成します。

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>

ログイン後にコピー

rreerree

2. HTML コンテンツを作成します。

　　<script src="path/to/swiper.min.js?1.1.10"></script>

ログイン後にコピー

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

</html>

ログイン後にコピー

4. Swiperの初期化: タグ(関数呼び出し)の隣に置くのがベストです

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

　　<!-- 如果需要分页器 -->
　　<div class="swiper-pagination"></div>
</div>

ログイン後にコピー

var swiper=new Swiper('.swiper-container',{
autoplay:1000, //自動カルーセル
autoplayDisableOnInteraction:false,//スライド後スクロール継続
loop:true,///Loop
pagination:'.swiper-pagination',////Pagination
paginationClickable:true,////小さな点click
spaceBetween: 30 ,//画像ギャップ
方向: "horizontal"//デフォルト水平垂直
})

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

ログイン後にコピー

以上がSwiper プラグインの概要と画像をカルーセル表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

PyCharm 初心者ガイド: プラグインのインストールを徹底理解! Feb 25, 2024 pm 11:57 PM

PyCharm は、開発者がより効率的にコードを記述できるようにする豊富な機能とツールを提供する、強力で人気のある Python 統合開発環境 (IDE) です。 PyCharm のプラグイン機構は、機能を拡張するための強力なツールであり、さまざまなプラグインをインストールすることで、PyCharm にさまざまな機能やカスタマイズ機能を追加できます。したがって、PyCharm の初心者にとって、プラグインのインストールを理解し、習熟することが重要です。この記事では、PyCharm プラグインの完全なインストールについて詳しく説明します。

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか? Mar 08, 2024 am 08:55 AM

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか?通常の状況では、Chrome プラグイン拡張機能のデフォルトのインストールディレクトリは次のとおりです。 1. WindowsXP での Chrome プラグインのデフォルトのインストールディレクトリの場所: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. Windows7 の chrome プラグインのデフォルトのインストールディレクトリの場所: C:\Users\username\AppData\Local\Google\Chrome\User

Edge ブラウザがこのプラグインをサポートしない理由に対する 3 つの解決策を共有します Mar 13, 2024 pm 04:34 PM

ユーザーが Edge ブラウザを使用する場合、より多くのニーズを満たすためにいくつかのプラグインを追加する場合があります。しかし、プラグインを追加すると、このプラグインはサポートされていないと表示されます。この問題を解決するにはどうすればよいですか?今日は編集者が 3 つの解決策を紹介しますので、ぜひ試してみてください。方法 1: 別のブラウザを使用してみてください。方法 2: ブラウザ上の Flash Player が古いか見つからないため、プラグインがサポートされていない可能性があり、公式 Web サイトから最新バージョンをダウンロードできます。方法3：「Ctrl+Shift+Delete」キーを同時に押します。「データを消去」をクリックしてブラウザを再度開きます。

Python ORM パフォーマンスベンチマーク: さまざまな ORM フレームワークの比較 Mar 18, 2024 am 09:10 AM

オブジェクトリレーショナルマッピング (ORM) フレームワークは、Python 開発において重要な役割を果たします。オブジェクトデータベースとリレーショナルデータベースの間にブリッジを構築することで、データアクセスと管理を簡素化します。さまざまな ORM フレームワークのパフォーマンスを評価するために、この記事では次の一般的なフレームワークに対してベンチマークを実行します。 sqlAlchemyPeeweeDjangoORMPonyORMTortoiseORM テスト方法ベンチマークでは、100 万レコードを含む SQLite データベースを使用します。テストでは、データベースに対して次の操作を実行しました。挿入: テーブルに 10,000 件の新しいレコードを挿入します。読み取り: テーブル内のすべてのレコードを読み取ります。更新: テーブル内のすべてのレコードの 1 つのフィールドを更新します。削除: テーブル内のすべてのレコードを削除します。各操作

ナイキシューズの靴箱の本物と偽物の見分け方（簡単に見分けるコツをマスター） Sep 02, 2024 pm 04:11 PM

世界的に有名なスポーツブランドとして、ナイキのシューズは大きな注目を集めています。しかし、市場にはナイキの偽物の靴箱などの偽造品も多数出回っています。消費者の権利と利益を保護するには、本物の靴箱と偽物の靴箱を区別することが重要です。この記事では、本物の靴箱と偽物の靴箱を見分けるための簡単で効果的な方法をいくつか紹介します。 1: 外箱のタイトルナイキの靴箱の外箱を観察すると、多くの微妙な違いを見つけることができます。ナイキの純正靴箱は通常、手触りが滑らかで、明らかな刺激臭のない高品質の紙素材を使用しています。本物の靴箱のフォントとロゴは通常、鮮明で詳細で、ぼやけや色の不一致はありません。 2: ロゴのホットスタンプのタイトル。ナイキの靴箱のロゴは通常、純正の靴箱のホットスタンプ部分に表示されます。

ビッグデータプロジェクトにおける Python ORM の適用 Mar 18, 2024 am 09:19 AM

オブジェクトリレーショナルマッピング (ORM) は、開発者が SQL クエリを直接記述せずにオブジェクトプログラミング言語を使用してデータベースを操作できるようにするプログラミングテクノロジです。 Python の ORM ツール (SQLAlchemy、Peeweee、DjangoORM など) は、ビッグデータプロジェクトのデータベース操作を簡素化します。利点コードの単純さ: ORM により、長い SQL クエリを作成する必要がなくなり、コードの単純さと読みやすさが向上します。データの抽象化: ORM は、アプリケーションコードをデータベース実装の詳細から分離する抽象化レイヤーを提供し、柔軟性を向上させます。パフォーマンスの最適化: ORM は多くの場合、キャッシュとバッチ操作を使用してデータベースクエリを最適化し、それによってパフォーマンスを向上させます。移植性: ORM により、開発者は次のことが可能になります。

Google Chrome でアニメーションプラグインを実行できる仕組み Mar 28, 2024 am 08:01 AM

Google Chrome ではどのようにしてアニメーションプラグインを実行できるようになりますか? Google Chrome は非常に強力です。多くの友人はビデオアニメーションを見るためにこのブラウザを使用するのが好きです。ただし、さまざまなアニメーションビデオを見たい場合は、ブラウザにアニメーションプラグインをインストールする必要があります。多くの友人は Google Chrome を使用しています。アニメーションプラグインを入れても動画が見れないのですが、どうすればいいでしょうか？次に、アニメーションプラグインを Google Chrome で実行できるようにするための具体的な手順をエディターに示します。興味のある友人は、見に来てください。 Google Chrome でアニメーションプラグインの実行を許可する具体的な手順: 1. まず、コンピュータで Google Chrome を実行し、ホームページの右上隅にあるメインメニューボタンをクリックします (図を参照)。 2. メインメニューを開いた後、下の「設定」オプションを選択します (図を参照)。 3. 設定で

Google Chromeプラグインのブロックを解除する方法 Apr 01, 2024 pm 01:41 PM

Google Chrome プラグインのブロックを解除するにはどうすればよいですか? Google Chrome を使用する際、豊富な機能やサービスを提供し、作業効率を向上させるために、さまざまな便利なプラグインをインストールするユーザーは多いですが、一部のユーザーは、Google Chrome にプラグインをインストールすると、プラグインが機能しなくなるという意見を持っています。常に表示されます。がブロックされています。この状況が発生した後、どうすればプラグインのブロックを解除できますか?次に、エディターが Google Chrome のプラグインのブロックを解除する手順を説明します。必要な友達は、見に来てください。 Google Chrome でプラグインのブロックを解除する方法ステップ 1. ブロックされたプロンプトが表示されたら、「コントロールバー」をクリックし、「ActiveX コントロールのインストール」を選択します。 2. 次に、ブラウザの「ツール」メニューを開き、「インターネットオプション」をクリックします。 3.

See all articles

Swiper プラグインの概要と画像をカルーセル表示する方法

swiper

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック