質問編集履歴

3 こうゆう事ですよねm(__)m やっとわかりました。

smty

smty score 33

2016/07/20 07:05  投稿

Bootstrapのcarouselが動かし方
Bootstrapのcarouselの動かし方
```<div id="top-image" class="carousel slide" data-ride="carousel">   
<ol class="carousel-indicators">
```
<div id="top-image" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
   <li data-target="#top-image" data-slide-to="0" class="active"></li>
   <li data-target="#top-image" data-slide-to="1"></li>
   <li data-target="#top-image" data-slide-to="2"></li>
</ol>
       <div class="carousel-inner" role="listbox">   
           <div class="item active">
               <img src="images/image.jpg" class="top-img">
                 <div class="carousel-caption">
                    <h2>サンプル</h2>
                    <p>テキスト</p>
                 </div>
           </div>
           <div class="item">
               <img src="images/image2.png" class="top-img">
               <div class="carousel-caption">
                   <h2>サンプル2</h2>
                   <p>テキスト</p>
               </div>
           </div>
           <div class="item">
               <img src="images/image3.png" class="top-img">
               <h2>サンプル3</h2>
               <p>テキスト</p>
           </div>
       </div>
</div>```
  <div class="carousel-inner" role="listbox">
     
     <div class="item active">
          <img src="images/image.jpg" class="top-img">
          <div class="carousel-caption">
               <h2>サンプル</h2>
               <p>テキスト</p>
          </div>
     </div>
  
     <div class="item">
          <img src="images/image2.png" class="top-img">
          <div class="carousel-caption">
               <h2>サンプル2</h2>
               <p>テキスト</p>
          </div>
     </div>
     
     <div class="item">
          <img src="images/image3.png" class="top-img">
          <h2>サンプル3</h2>
          <p>テキスト</p>
     </div>
  </div>
</div>
```
Bootstrapはダウンロードしています。
htmlの<head>タグの中に、自作のCSSとbootstrap.min.cssをbootstrap.min.css→style.cssの順番で読みこんでいる。
</body>タグの直前でjQueryを読み込んで、bootstrap.min.js→自作のjsファイルの順番で読み込んでいます。
画像の表示と、bootstrapのcssは表示できています。(確認済み)
自作のjsファイルに$('.carousel').carousel({interval: 2500 });を記述しているんですが、自動でも手動でも画像の切り替えができません。
解決方法のわかる方お願いします。
ちなみに、Bootstrapのcssやjsファイルを編集することはできますか?
それともしない方がよろしいですか?
vimでファイルを開くと、改行なしの1行で隙間なく書かれているため、編集がかなりしづらくなっているので触らない方がいいのかと・・・
  • HTML5

    9916 questions

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

  • Bootstrap

    2519 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • CSSフレームワーク

    424 questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

2 ネストを見やすくしました。

smty

smty score 33

2016/07/19 19:23  投稿

Bootstrapのcarouselが動かし方
```<div id="top-image" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#top-image" data-slide-to="0" class="active"></li>
<li data-target="#top-image" data-slide-to="1"></li>
<li data-target="#top-image" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/image.jpg" class="top-img">
<div class="carousel-caption">
<h2>サンプル</h2>
<p>テキスト</p>
</div>
</div>
<div class="item">
<img src="images/image2.png" class="top-img">
<div class="carousel-caption">
<h2>サンプル2</h2>
<p>テキスト</p>
</div>
</div>
<div class="item">
<img src="images/image3.png" class="top-img">
<h2>サンプル3</h2>
<p>テキスト</p>
</div>
</div>
</div>```
Bootstrapはダウンロードしています。
htmlの<head>タグの中に、自作のCSSとbootstrap.min.cssをbootstrap.min.css→style.cssの順番で読みこんでいる。
</body>タグの直前でjQueryを読み込んで、bootstrap.min.js→自作のjsファイルの順番で読み込んでいます。
画像の表示と、bootstrapのcssは表示できています。(確認済み)
自作のjsファイルに$('.carousel').carousel({interval: 2500 });を記述しているんですが、自動でも手動でも画像の切り替えができません。
解決方法のわかる方お願いします。
ちなみに、Bootstrapのcssやjsファイルを編集することはできますか?
それともしない方がよろしいですか?
vimでファイルを開くと、改行なしの1行で隙間なく書かれているため、編集がかなりしづらくなっているので触らない方がいいのかと・・・
  • HTML5

    9916 questions

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

  • Bootstrap

    2519 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • CSSフレームワーク

    424 questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

1 ネストを見やすいようにしました。

smty

smty score 33

2016/07/19 19:22  投稿

Bootstrapのcarouselが動かし方
<div id="top-image" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
<li data-target="#top-image" data-slide-to="0" class="active"></li>
```<div id="top-image" class="carousel slide" data-ride="carousel">   
<ol class="carousel-indicators">
   <li data-target="#top-image" data-slide-to="0" class="active"></li>
   <li data-target="#top-image" data-slide-to="1"></li>
           <li data-target="#top-image" data-slide-to="2"></li>
       </ol>
   <li data-target="#top-image" data-slide-to="2"></li>
</ol>
       <div class="carousel-inner" role="listbox">   
           <div class="item active">
               <img src="images/halley-daviddson.jpg" class="top-img">
               <img src="images/image.jpg" class="top-img">
                 <div class="carousel-caption">
                      <h2>サンプル</h2>
                       <p>テキスト</p>
                    <h2>サンプル</h2>
                    <p>テキスト</p>
                 </div>
           </div>
           <div class="item">
               <img src="images/halley-daviddoson2.png" class="top-img">
               <img src="images/image2.png" class="top-img">
               <div class="carousel-caption">
                   <h2>サンプル2</h2>
                   <p>テキスト</p>
               </div>
           </div>
           <div class="item">
               <img src="images/halley-daviddoson3.png" class="top-img">
               <img src="images/image3.png" class="top-img">
               <h2>サンプル3</h2>
               <p>テキスト</p>
           </div>
       </div>
      </div>
       </div>
</div>```
Bootstrapはダウンロードしています。
htmlの<head>タグの中に、自作のCSSとbootstrap.min.cssをbootstrap.min.css→style.cssの順番で読みこんでいる。
</body>タグの直前でjQueryを読み込んで、bootstrap.min.js→自作のjsファイルの順番で読み込んでいます。
画像の表示と、bootstrapのcssは表示できています。(確認済み)
自作のjsファイルに$('.carousel').carousel({interval: 2500 });を記述しているんですが、自動でも手動でも画像の切り替えができません。
解決方法のわかる方お願いします。
ちなみに、Bootstrapのcssやjsファイルを編集することはできますか?
それともしない方がよろしいですか?
vimでファイルを開くと、改行なしの1行で隙間なく書かれているため、編集がかなりしづらくなっているので触らない方がいいのかと・・・
  • HTML5

    9916 questions

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

  • Bootstrap

    2519 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • CSSフレームワーク

    424 questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る