<実現したいこと>
jQueryのslickを使用して短い文を3つフェードイン・フェードアウトするようにしたい。
3つめの文が表示されたらループせずそこで文字の表示を終了する。
<起きている不具合>
無限ループになってしまう。このinfiniteオプションだけ効かない。
<試してみたこと>
slickのオプションをinfinite:false,にしているにもかかわらず、表示文字が無限ループしてしまう。
trueにしてみてからfalseにしてみましたが、効果ありませんでした。
infinite:false,のオプションを書く位置が一番下だったので一番上に移動しましたが、やはり改善しません。
<その他注意>
videoタグで再生した約14秒の動画ファイル(MP4)の上にslickを使って文字を表示するようにしてあります。
動画ファイルは[movie]というフォルダを作成してここに入れています。[images]フォルダには入れていません。
今現在は仕方ないので動画が終わるあたりで3つめの文章の表示も終わるようにslickのオプション時間を設定しています。
html
1<!DOCTYPE HTML> 2<html> 3<head> 4<title>動画上に文字をスライドショーする練習</title> 5<link rel="stylesheet" type="text/css" href="css/reset.css"> 6<link rel="stylesheet" type="text/css" href="css/style.css"> 7<link rel="stylesheet" type="text/css" href="slick/slick.css"> 8<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"> 9<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 10<script type="text/javascript" src="slick/slick.js"></script> 11 12<script type="text/javascript"> 13/*-----------------------Slick------------------------*/ 14$(function(){ 15 $('.autoplay_intro').slick({ 16 infinite:false,//無限ループしない 17 slidesToShow: 1,//表示させるスライド数 18 slidesToScroll: 1,//一度に移動させるスライド数 19 autoplay: true,//自動再生するかどうか 20 autoplaySpeed: 3600,//自動再生でスクロールする時間(ミリ秒) 21 fade:true,//フェードするかどうか 22 speed:2000,//フェードスピード 23 dots: false,//ドット 24 arrows: false,//矢印ボタン 25 pauseOnHover:false,//ホバー時に一時停止するか 26 pauseOnFocus:false,//フォーカス時に一時停止するか 27 touchMove:false,//タッチでスライド 28 touchThreshold:0,//スライダーの横幅分マウスドラッグするとスライド 29 }); 30}); 31</script> 32</head> 33 34<body> 35<div id="head_contents"> 36<!--############ 動画再生 ############--> 37<video onended="location.href='index.html'; " poster="movie/intro_image.jpg" width="100%" autoplay="autoplay" muted src="movie/約14秒の動画ファイル名.mp4"> 38 <source src="movie/約14秒の動画ファイル名.mp4" type="video/mp4"> 39 <p>現在のブラウザでは動画の再生ができません。</p> 40</video> 41 <div class="large_box_intro"><!--############ 文字スライドショー ############--> 42 <div class="slider_intro autoplay_intro"> 43 <!-----class="slick-slide"は縦並び解消-----> 44 <div class="slick-slide intro_slick_text"> 45 <p>1番目に表示する文章</p> 46 </div> 47 <div class="slick-slide intro_slick_text"> 48 <p>2番目に表示する文章</p> 49 </div> 50 <div class="slick-slide intro_slick_text"> 51 <p>3番目に表示する文章</p> 52 </div> 53 </div> 54 </div><!---- /.large-box_intro ----> 55</div><!---- /#head_contents ----> 56 57</body> 58</html>
CSS
1※以下はstyle.cssのみの内容となります。 2 3@charset "UTF-8"; 4 5/*-------- intro ----------*/ 6#head_contents{ 7display: flex; /*** 中の文字を中央に揃えるため ***/ 8justify-content: center;/*** 中の文字を中央に揃えるため ***/ 9align-items: center; /*** 中の文字を中央に揃えるため ***/ 10border:solid 3px red; 11} 12/********************** For [Slick] only ********************/ 13/*------ 文字スライドショー ------*/ 14.large_box_intro{ 15width:100%; 16 margin-left: auto; 17 margin-right: auto; 18 text-align:center; 19 z-index:200; 20 position:absolute; 21} 22.slider_intro{ 23 opacity: 1; 24 transition: opacity .50s linear; 25} 26.intro_slick_text{ 27 color:pink; 28 font-size:8em; 29 font-family:serif; 30 text-align:center; 31} 32/************************************************************/ 33
あなたの回答
tips
プレビュー