前提・実現したいこと
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に関してはまだ勉強中で初心者です。
よろしくお願いいたします。
あなたの回答
tips
プレビュー