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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

jQuery

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

Q&A

0回答

1292閲覧

jQueryのslickの無限ループ(infinite)をオフにできない

kumacyan

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

jQuery

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

0グッド

0クリップ

投稿2021/02/21 04:41

編集2021/02/21 04:42

<実現したいこと>
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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問