質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

1327閲覧

Flexsliderで再生時間を個別に設定したい

Ina79

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/11/23 12:25

前提・実現したいこと

Flexslider を利用して動画と画像が混在したスライドを制作。
動画は30秒、画像は6秒でスライドさせたい。

発生している問題・エラーメッセージ

DLして読み込ませている、jquery.flexslider-min.js の slideshowSpeed: 7000, の数字を変更することで
再生時間を変更できるのですが、個別に変更することができません。

該当のソースコード

【HTML】※一部略----------------

<div class="flexslider top_slider">  <ul class="slides">   <li class="slide1">    <video loop muted autoplay src="video1.mp4" class="video1"/></video>   </li>   <li class="slide1">    <video loop muted autoplay src="video2.mp4" class="video2"/></video>   </li>   <li class="slide1">    <img src="photo1.mp4" class="photo1"/></video>   </li>   <li class="slide1">    <img src="photo2.mp4" class="photo2"/></video>   </li>  </ul> </div>

試したこと


DLして読み込ませている、jquery.flexslider-min.js の slideshowSpeed: 7000, の数字を変更することで
再生時間を変更できるのですが、個別に変更することができません。

https://github.com/woocommerce/FlexSlider/blob/master/demo/js/jquery.flexslider.js
1163行目を変更 slideshowSpeed: 7000,


</head>のすぐ前で下記を設定 私の記載方法が間違えているのかもしれません 参考:https://deep-space.blue/web/326 <script type="text/javascript" src="/js/jquery.flexslider-min.js"></script> <script type="text/javascript" src="/js/flexslider-init.js"></script> <script> $hook = $('.flexslider'); $hook.flexslider({ animation: "fade", slideshowSpeed: 6000, start: function (slider) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, 0); }, after: function (slider) { if (slider.currentSlide == 0) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, 30000); } if (slider.currentSlide == 1) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, 30000); } if (slider.currentSlide == 2) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, 6000); } if (slider.currentSlide == 3) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, 6000); } } }); </script>

コメント

別の方が制作したもので、かなり作り込んでおり、他の場所でもFlexsliderを利用してます。
かなり構成が複雑になっているので、ここを別のjQueryに置き換えるとcssの書き換えなどがかなり大変になります。
できればFlexsliderを利用して今回の設定を行えたらと思います。
jsに関してはまだ勉強中で初心者です。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問