Videojs+swiper が Taobao の商品詳細カルーセルを実現

Videojs+swiper が Taobao の商品詳細カルーセルを実現

この記事では、Taobao商品詳細のカルーセルを実現するためのvideojs+swiperの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

これは videojs と swiper を参照します。この効果は、Taobao の商品詳細のカルーセル画像に似ており、最初のカルーセルはビデオです。
ビデオの再生が始まると、カルーセルは停止します。ビデオを一時停止しても、カルーセルは続行されます。
ビデオの再生中に次のスライドにスライドすると、ビデオは一時停止します。

スワイパーマニュアル

HTML部分:

<!-- スワイパー カルーセル-->
<div class="スワイパーコンテナ">
   <div class="スワイパーラッパー">
       <div class="スワイパースライド">
           <video id="video" style="width: 100%;height: 100%;" controls preload="none" poster="xxxx" class="video-js vjs-big-play-centered" >
            <ソース src="xxxx" type="video/mp4">
           </ビデオ>
       </div>
       <div class="swiper-slide"><img src="xxxx" alt=""></div>
        <div class="swiper-slide"><img src="xxxx" alt=""></div>
        <div class="swiper-slide"><img src="xxxx" alt=""></div>
        <div class="swiper-slide"><img src="xxxx" alt=""></div>
   </div>
   <!-- ポケベルが必要な場合 -->
   <div class="swiper-pagination"></div>
</div>

js部分:

//新しいvideojsオブジェクトを作成する var player = videojs('video', {
     ミュート: true、
     コントロール: true、
     // ループ: true,
 });

 // スワイパーカルーセル var mySwiper = new Swiper ('.swiper-container', {
     direction:'horizo​​ntal', // スライドショーの方向。垂直にもできます loop: true, // ループ再生 autoplay:3000, // スライド自動切り替え時間 speed:2000, // スライドスライドアニメーション時間 height: 100,
     pagination: '.swiper-pagination', // ページネーターが必要な場合、つまり下の小さな点が必要な場合 autoplayDisableOnInteraction : false, // この方法では、スライドしてもタイマーはクリアされません offsetWidth: 0,
     observer:true, // 監視 // スワイパーがスライドから別のスライドに遷移するときに、ビデオの再生を停止します (ここでは swiper3 ですが、swiper4 は別の方法で記述されています)
     onSlideChangeStart: 関数(スワイパー){
          プレーヤーを一時停止します。
     }
 });


 //ビデオの再生中にカルーセルを停止しますplayer.on('play',function(){
     // コンソールログ(mySwiper)
     mySwiper.stopAutoplay()
 });

 // ビデオが一時停止されると、カルーセルは続行されます player.on('pause', function(){
     mySwiper.startAutoplay()
 });

swiper と videojs の js と css はここでは紹介されていませんが、Baidu で検索できます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Taobao の商品画像切り替え効果を実現する JavaScript
  • 商品画像拡大鏡を実現する JavaScript
  • JavaScriptはeコマースプラットフォームの製品詳細を実装します

<<:  Linux で文字化けしたファイルや特殊文字のファイルを削除する方法

>>:  MySQL Order By 複数フィールドのソートルールのコード例

推薦する

動的なセカンダリメニューを実現するためのCSS

シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...

Vueのドラッグスクリーンショット機能を実装する簡単な方法

マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグ...

React NativeのstartReactApplicationメソッドの簡単な分析

今回は、 RNの起動処理を整理しました。最後のstartReactApplication比較的複雑で...

DockerコンテナでのMySQLデータのインポート/エクスポートの詳細な説明

序文MySQL データのインポートとエクスポートは mysqldump コマンドで解決できることは誰...

Linux 向けの強化されたスクリーンショットと共有ツール: ScreenCloud

ScreenCloud は、必要だとは思わなかった素晴らしい小さなアプリです。デスクトップ Lin...

PCとモバイルの適応の問題に対する迅速な解決策

Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題...

Docker マルチステージビルドを使用してイメージサイズを縮小する方法

この記事では、Docker のマルチステージ ビルド機能を使用してイメージ サイズを大幅に削減する方...

LeetCode の SQL 実装 (177. 給与が N 番目に高い)

[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...

js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析

目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...

CSS でフッターの「下部吸収」効果を実現

よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...

HBuilderX で Tomcat 外部サーバーを設定して、JSP インターフェイスを表示および編集する方法の詳細な説明

1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...

VUE ユニアプリカスタムコンポーネントについての簡単な説明

1. 親コンポーネントはpropsを通じて子コンポーネントにデータを渡すことができる2. 子コンポー...

Vue は QR コード スキャン機能を実装します (スタイル付き)

必要: vue を使用して QR コードのスキャンを実現します。プラグイン: QRコードリーダー;プ...

CSS 表示テーブルの適応的な高さと幅の問題の解決策

定義と使用法display プロパティは、要素が生成するボックスのタイプを指定します。例示するこの属...

Nginx ドメイン転送の使用シナリオ コード例

シナリオ 1: サーバーの制限により、外部に開かれているポートは 1 つだけですが、別の外部ネットワ...