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 複数フィールドのソートルールのコード例

推薦する

MySQL 作成ルーチン権限に関する注意事項

1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...

MySQL バージョン 5.7.24 のデータベース インストール プロセスの詳細なグラフィック説明

MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーションに...

ウェブページのテーブルの境界線を設定する方法

<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...

altとtitleの違いの詳しい説明

これら 2 つの属性はよく使用されますが、その違いはまとめられていません。それでは、その使い方をまと...

データ型の判断における js typeof と instanceof の違いと、その開発と使用について

目次1. typeof演算子2. インスタンスオブ演算子3. typeof と instanceof...

ウェブデザインの詳細分析に関する詳細な議論

設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...

MySQL Binlog ログの読み取り時によくある 3 つのエラー

1. mysqlbinlog: [エラー] 不明な変数 'default-character...

要素動的ルーティングブレッドクラムの実装例

マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...

MySQLクラスタのDockerデプロイメントの実装

シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...

音声キューイングシステムを実装するためのJavaScript

目次導入主な特徴エフェクト表示キーコード導入音声キューイングシステムは、銀行、レストラン、病院などの...

コマンドラインを使用してUbuntuのバージョンを検出する方法

方法1: lsb_releaseユーティリティを使用するlsb_release ユーティリティは、L...

AngularとIonicのライフサイクルとフック関数を素早く理解するための記事

目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...

JSアルバム画像の揺れと拡大表示効果のサンプルコード

前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...

Web 開発チュートリアル クロスドメイン ソリューションの詳細な説明

序文この記事では、主にWeb開発のためのクロスドメインソリューションを紹介し、参考と学習のために共有...

Xtrabackup を使用して MySQL をバックアップおよび復元する方法

目次1. バックアップ1.1 万全の準備1.2 追加の準備2 バックアップとリカバリ2.1 データの...