BxSliderを適用する際に画像が表示されない(動作はしています)

###前提・実現したいこと
この質問の続きとなっております。
申し訳ありませんが、引き続きお力をお貸しいただけますと幸いです。

ruby on railsを用い(この表現も正確か分かりません)自分でwebページを作ってみたいと思っております。
0から作るのではなく、
Ruby on Rails チュートリアルを全行程終わらせた成果物をブラッシュアップしていく、という形です。
手始めに、色々なサイトによくあるスライドショーのようなものを表示させたいと思い
「bxslider(こちらのサイトを参考にさせていただきました。)」を用いて実現しようと考えております。

###発生している問題・エラーメッセージ
スライダーのひな型？のようなものは表示され、いよいよその白い面に画像が載れば完成！というところなのですが
いかんせん画像が表示されません…
Chromeデベロッパーツールにもエラーが表示されなくなり、どうしたらいいのか分かりません。
###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>Ruby on Rails Tutorial Sample App</title>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
6  <link rel="stylesheet" media="all" href="/assets/account_activations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
7<link rel="stylesheet" media="all" href="/assets/custom.self-81bbf562ca335a709ee83c010d4cc658bf6a3a6648bcd73f5ee7fcbf1d6a2e89.css?body=1" data-turbolinks-track="true" />
8<link rel="stylesheet" media="all" href="/assets/jquery.bxslider.self-bbab3ad0b58b6f86426ad37ea56ad041af6d4ec186f6bceed95572414dee8e9f.css?body=1" data-turbolinks-track="true" />
9<link rel="stylesheet" media="all" href="/assets/microposts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
10<link rel="stylesheet" media="all" href="/assets/password_resets.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
11<link rel="stylesheet" media="all" href="/assets/relationships.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
12<link rel="stylesheet" media="all" href="/assets/sessions.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
13<link rel="stylesheet" media="all" href="/assets/static_pages.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
14<link rel="stylesheet" media="all" href="/assets/users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
15<link rel="stylesheet" media="all" href="/assets/bxslider.self-66d0fab3ba0b739c4e011dc424ae5456b01c70c8da0cd577804d535f620a3ef9.css?body=1" data-turbolinks-track="true" />
16<link rel="stylesheet" media="all" href="/assets/application.self-d885a0a66bd595c10edb24f8879f94e334d88be0730c4d7c7a7b57c731c09037.css?body=1" data-turbolinks-track="true" />
17  <script src="/assets/jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1" data-turbolinks-track="true"></script>
18<script src="/assets/jquery_ujs.self-8e98a7a072a6cee1372d19fff9ff3e6aa1e39a37d89d6f06861637d061113ee7.js?body=1" data-turbolinks-track="true"></script>
19<script src="/assets/bootstrap.self-cdea7efeac1597b89ddd6fd86b0e8e0bec5d5fb1fac9c6e8a045f2c59eef2d13.js?body=1" data-turbolinks-track="true"></script>
20<script src="/assets/turbolinks.self-c846e670826600e8c91b1a5ada3e6547110d996cd6ff24cde55024f7a135a1b4.js?body=1" data-turbolinks-track="true"></script>
21<script src="/assets/jquery.bxslider.self-378be78e3ae2ebfc909b86a0b3aea51858c2a394b967a6abafacb3d1fabeb8fd.js?body=1" data-turbolinks-track="true"></script>
22<script src="/assets/jquery.easing.1.3.self-c85028b4485f3b7e91508aa9891cfeb41a8884efd87672715de3fa1ae2173948.js?body=1" data-turbolinks-track="true"></script>
23<script src="/assets/jquery.fitvids.self-0caa1c3cf6099ad75621d7021e543202502128d712d830ae831528e2a7460237.js?body=1" data-turbolinks-track="true"></script>
24<script src="/assets/bxslider.self-6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167.js?body=1" data-turbolinks-track="true"></script>
25<script src="/assets/account_activations.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
26<script src="/assets/jquery.bxslider.min.self-2efec8c17fede6e22e8d83ca279de13cda53ced160ab53498db5ffcf3a700dde.js?body=1" data-turbolinks-track="true"></script>
27<script src="/assets/microposts.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
28<script src="/assets/password_resets.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
29<script src="/assets/relationships.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
30<script src="/assets/sessions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
31<script src="/assets/static_pages.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
32<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
33<script src="/assets/application.self-7862a8a8b42407b4741a1adeeea35f0d13ddc4f702ec532adb0674491d296495.js?body=1" data-turbolinks-track="true"></script>
34  <meta name="csrf-param" content="authenticity_token" />
35<meta name="csrf-token" content="dPr+mv53eB4eTokahJQMeYPZhaCEwhOTiNXyN1YK8NPcaHsRJ3128rTVZwafpkiFw+o5feyQ9DZHYPjbp5GbZQ==" />
36  <!--[if lt IE 9]>
37<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
38</script>
39<![endif]-->
40
41    <script type="text/javascript">
42            $(document).ready(function(){
43                $('.bxslider').bxSlider({
44                    auto: true
45                });
46        	});
47    </script>
48</head>
49<body>
50    <header class="navbar navbar-fixed-top navbar-inverse">
51  <div class="container">
52
53    <a id="logo" href="/"><img alt="logo" src="/assets/logo-10cacf97637abbf6ff7bf7b642f1369acbe27c1d9f48510a8c73121fa4767cc9.PNG" /></a>
54    <nav>
55      <ul class="nav navbar-nav navbar-right">
56        <li><a href="/">Home</a></li>
57        <li><a href="/help">Help</a></li>
58          <li><a href="/login">Log in</a></li>
59      </ul>
60    </nav>
61  </div>
62</header>
63
64    <div class="container">
65
66
67
68
69
70            <ul class="bxslider">
71                <li><img src="/assets/info-e5600a0fb5c272f510453c26a6134e45266d854ecbc6a575cff93ca0fe95a7a5.PNG" /></li>
72                <li><img src="/assets/info-e5600a0fb5c272f510453c26a6134e45266d854ecbc6a575cff93ca0fe95a7a5.PNG" /></li>
73                <li><img src="/assets/info-e5600a0fb5c272f510453c26a6134e45266d854ecbc6a575cff93ca0fe95a7a5.PNG" /></li>
74                <li><img src="/assets/info-e5600a0fb5c272f510453c26a6134e45266d854ecbc6a575cff93ca0fe95a7a5.PNG" /></li>
75                <li><img src="/assets/info-e5600a0fb5c272f510453c26a6134e45266d854ecbc6a575cff93ca0fe95a7a5.PNG" /></li>
76        </ul>
77/////////////////////この部分が白紙のスライドショーになってしまいます。
78
79
80
81
82
83                <li><img src="/assets/info-e5600a0fb5c272f510453c26a6134e45266d854ecbc6a575cff93ca0fe95a7a5.PNG" /></li>
84/////////////////////このイメタグはきちんと画像が表示されます。
85
86
87
88
89
90<div class="container">
91
92  <div class="center jumbotron">
93    <h1>Welcome to the Sample App</h1>
94
95    <h2>
96      This is the home page for the
97      <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
98      sample application.
99    </h2>
100
101    <a class="btn btn-lg btn-primary" href="/signup">Sign up now!</a>
102  </div>
103
104  <a href="http://rubyonrails.org/"><img alt="Rails logo" src="/assets/rails-c094bc3a4bf50e5bb477109e5cb0d213af27ad75b481c4df249f50974dbeefe6.png" /></a>
105
106
107      <footer class="footer">
108  <small>
109    The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
110    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
111  </small>
112  <nav>
113    <ul>
114      <li><a href="/about">About</a></li>
115      <li><a href="/contact">Contact</a></li>
116      <li><a href="http://news.railstutorial.org/">News</a></li>
117    </ul>
118  </nav>
119</footer>
120
121      <pre class="debug_dump">--- !ruby/hash-with-ivars:ActionController::Parameters
122elements:
123  controller: static_pages
124  action: home
125ivars:
126  :@permitted: false
127</pre>
128    </div>
129  </body>
130</html>

###謝辞
問題解決にあたり、何か必要な情報などありましたら遠慮なくお申し付けください。
長文になりましたが、ここまで目を通していただき誠にありがとうございました。
何卒、お力添えをよろしくお願い申し上げます。

gin

2016/11/16 14:09

白いまま動いてることは動いてるんですか？

hikaru923

2016/11/16 16:02

白なので二枚目になってるかは不明ですが、一応画面下部の「何枚目かを示すマーク」も遷移しており、動作はしているみたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

開発ツールで確認したときに画像は読み込まれていますか？
読み込まれている場合、開発ツール上で適用されているCSSを1個1個外していってみてください。
セレクタ(.bxsliderとか)ではなくプロパティ(margin:0;とか)を1個1個です。
position近辺が怪しいのでそれを優先的に。

投稿2016/11/17 01:44

gin

総合スコア2722

hikaru923

2016/11/17 02:12

ありがとうございます！！！ Bootstrapという規定のCSSを読み込んでいた結果 float: right;という記述があり、そこが邪魔をしていたみたいです。お手数おかけいたしました！無事解決いたしました！本当に助かりました。誠にありがとうございます！

gin

2016/11/17 02:17

あらｗこれから崩しているCSSにあたりをつけて～とか長期戦になるの覚悟しての投稿でしたけど、即解決したようでよかったです^^

hikaru923

2016/11/17 02:23

ポチポチ一つずつ消していってたら突然画像が表示されたものでｗ私もうーん、これで表示されなかったらどうしよう…と無駄に思い悩んでいましたが… 案外簡単に行きました。 rubyonrailsチュートリアルの成果物に手を加えるのは結構専門的な知識がいるようです… 写経ばかりしてたツケが回ってきました… すぐに回答していただき本当にありがとうございました！

行動規範の内容に同意します