スマホOK！スライダーにYouTubeなど自動再生動画を使う方法（slick.js） | 株式会社ウェブ企画パートナーズ
サイトのメインビジュアルで動画がを再生するのは最近のトレンドとなっています。 今回はさらにアレンジして自動再生動画を使ったスライダーの作成に挑戦してみました。その際の知見をご紹介いたします。 <ul class="slider"> <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-123540.mp4" autoplay loop muted></a></li> <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-2629-1.mp4" autoplay loo
slick.jsにYouTube, Vimeo, video要素の動画を含めて自動再生するスライダーを生成する方法
現在、もっともポピュラーでカスタマイズ性が高く実装が簡単な、レスポンシブ対応のスライドショーjQueryモジュールである「slick.js」。 弊社にて提供中のWordPressテーマ「DigiPress」シリーズの次期テーマには、トップページのスライダーに動画を含めることが要件としてあるため、今回はそんな人気のスライドショーモジュール「slick.js」を利用して、画像だけでなくYouTube、Vimeo、さらにHTML5のvideo要素の動画もスライドとして含める方法を、次期リリース予定のテーマ向けに考えてみました。 今回のデモで動画スライドを含めたスライドショーを実装する要件は以下です。 スライドに動画を含める要件 動画は、YouTube、Vimeo、video要素のムービーを含めることができる 動画スライドが表示された際は、自動再生させる 動画スライドが非アクティブになった際は、一
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.metaslider.com/wp-content/uploads/2014/07/video-slide-demo.jpg
Loading...
IDEA * IDEA
