###実現したいこと
JQueryで文字をfadeinさせたいです。
カルーセルの左右のインディケータをクリックすると、キャプション(画面中の文字)が浮かび上がってくるイメージです。
###現状
実際にコードを記述しても変化がありません。
###JQueryコード
$(function() { $(".left").on("click",function() { $(".carousel-caption").fadeIn("slow"); }); }); }); $(function() { $(".right").on("click",function() { $(".carousel-caption").fadeIn("slow"); }); }); });
###HTMLコード
<section class="carousel-size"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000"> <div class="carousel-inner"><!-- 変更 --> <div class="item active"> <img src="images/slide1.jpg" alt="slide1" width="100%"> <div class="carousel-caption"> 古くから、<br>料理する場、<br>暖をとる場として<br>家族の中心に置かれてきた囲炉裏。 </div> </div> <div class="item"> <img src="images/slide2.jpg" alt="slide2" width="100%"> <div class="carousel-caption"> 鉄瓶にゆらゆらと立ち上る湯気、<br>時折ぱちぱちと爆ぜる炭を<br>眺めていると、<br>時間がゆっくり、ゆっくりと<br>流れていきます。 </div> </div> <div class="item"> <img src="images/slide3.jpg" alt="slide3" width="100%"> <div class="carousel-caption"> 囲炉裏を囲み、<br>家族が心の中から温まる、<br>そんな場所を作りたくて始めました。 </div> </div> <div class="item"> <img src="images/slide4.jpg" alt="slide4" width="100%"> <div class="carousel-caption"> 1つ1つ丁寧に作られた囲炉裏は、<br>あなただけの、<br>世界にたった1つの作品となります。<br>是非、囲炉裏の持つ独自な趣を、<br>体感してください。 </div> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </section>
###CSSコード
.carousel-inner { padding: 0; } .carousel-caption { bottom: 25%; }
※カルーセルはBootstrap3で実装しています。
以上、ご確認お願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/25 14:50
2017/11/25 14:54
2017/11/25 14:58
2017/11/25 14:59
2017/11/25 15:02
2017/11/25 15:06
2017/11/25 15:10
2017/11/25 15:13 編集
2017/11/25 15:18
2017/11/25 15:23
2017/11/25 15:33