この記事では、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:'horizontal', // スライドショーの方向。垂直にもできます 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で文字化けしたファイルや特殊文字のファイルを削除する方法
>>: MySQL Order By 複数フィールドのソートルールのコード例
シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...
マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグ...
今回は、 RNの起動処理を整理しました。最後のstartReactApplication比較的複雑で...
序文MySQL データのインポートとエクスポートは mysqldump コマンドで解決できることは誰...
ScreenCloud は、必要だとは思わなかった素晴らしい小さなアプリです。デスクトップ Lin...
Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題...
この記事では、Docker のマルチステージ ビルド機能を使用してイメージ サイズを大幅に削減する方...
[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...
目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...
よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...
1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...
1. 親コンポーネントはpropsを通じて子コンポーネントにデータを渡すことができる2. 子コンポー...
必要: vue を使用して QR コードのスキャンを実現します。プラグイン: QRコードリーダー;プ...
定義と使用法display プロパティは、要素が生成するボックスのタイプを指定します。例示するこの属...
シナリオ 1: サーバーの制限により、外部に開かれているポートは 1 つだけですが、別の外部ネットワ...