私は現在、Web開発でロープを学び、Bootstrapの使用を開始しました。現在、カルーセルに取り組んでいます。デザインが気に入らないので、別のカルーセルを見つけました
私はいくつかの方法を試し、ウェブサイトのガイドを読みましたが、何らかの理由で自分のウェブサイトでそれを機能させることができません。プラグインを追加する方法を知っている人はいますか?
私は現在、Web開発でロープを学び、Bootstrapの使用を開始しました。現在、カルーセルに取り組んでいます。デザインが気に入らないので、別のカルーセルを見つけました
私はいくつかの方法を試し、ウェブサイトのガイドを読みましたが、何らかの理由で自分のウェブサイトでそれを機能させることができません。プラグインを追加する方法を知っている人はいますか?
ここから始めましょう:
http://jsfiddle.net/panchroma/hV3bT/
http://www.pixedelic.com/plugins/camera/から zip パッケージをダウンロードし、basic.htm ページをチェックアウトしました。
ブートストラップの例の HTML を見ると、このダウンロードしたサンプル ページとほぼ同じですが、コンテンツを
<div class="fluid_container"> ... </div>
同等のブートストラップグリッド内に配置しました
<div class="container">
<div class="row-fluid">
<div class="span12">
<!-- content here -->
</div>
</div>
</div>
次に、CSS ファイルと JavaScript ファイルを、basic.html の例と同じ順序でロードしました。
他の唯一のことは、例のページにも頭の中にいくつかのスタイルがあることに気付くでしょう. おそらく必要なのは #back_to_camera div だけです。
この例の CSS と JavaScript に関する詳細情報が必要な場合は、jsFiddle に移動して、結果ペインのソース コードを確認してください。どの CSS および JavaScript ファイルが使用されているか、それらがロードされる順序、および head 内の追加の CSS および JavaScript が表示されます。
私の例では、いくつかのアイコンが欠けています...矢印など。画像、JavaScript、CSS をサイトにインストールしたら、それらもすべて適切に機能するはずです。
お役に立てれば!
編集:この余分なCSSを追加して、2番目のカルーセルの例の下部にあるサムネイルを水平に表示するように強制しました
.camera_thumbs_cont ul{
width:100% !important;
}
.camera_thumbs_cont li
{
display: inline !important;
padding-right: 20px;
}