bxsliderがうまく動かない

###前提・実現したいこと
bxsliderを用いたスライドショーを作成
現在vagrantを用いてローカル開発環境を作成し、そこで実際に動くか確認したがうまく動かない

###発生している問題・エラーメッセージ

1) 画像を4枚読み込んでいるが、最初が1枚目ではなく4枚目が表記される
2) スライドが全く動かない

###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<title>bxsliderデモ</title>
6	<!-- bxslider(cssファイル) -->
7	<link href="/bxslider/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
8	<!-- jQueryライブラリをGoogleよりダウンロード -->
9	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
10	<!-- bxslider(JSファイル)をダウンロード -->
11	<script src="/bxslider/jquery.bxslider/jquery.bxslider.min.js"></script>
12</head>
13<body>
14	<ul class="bxslider">
15		<li><img src="img/image1.jpg"></li>
16		<li><img src="img/image2.jpg"></li>
17		<li><img src="img/image3.jpg"></li>
18		<li><img src="img/image4.jpg"></li>
19	</ul>
20
21	<script type="text/javascript">
22		$(document).ready(function(){
23			$('.bxslider').bxSlider({
24				speed: 1000,
25				slideWidth: 600
26			});
27		});
28	</script>
29</body>
30</html>

bxsliderファイル(分かりにくくてすみません・・・)
bxslider(フォルダ)
  bxslider_server.html

  img
    image1.jpg
    image2.jpg
    image3.jpg
    image4.jpg

  jquery.bxslider
    jquery.bxslider.css
    jquery.bxslider.min.js

###補足情報(言語/FW/ツール等のバージョンなど)
プラグインに関しては今日初めて触れている状態でございます。
おそらくbxsliderファイルを呼び出すパスの部分が間違っているのかなと思うのですが、全く確証がないため、よろしければアドバイスよろしくお願いいたします。

kei344

2016/10/19 08:41

提示されているHTMLは bxslider_server.html でしょうか。

vnsa7221

2016/10/19 09:03

そうです。分かりにくくて申しわけありません・・・

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

回答1件

ベストアンサー

link と script の /bxslider/ を外せばよいのでは？

投稿2016/10/19 09:12

kei344

総合スコア69407

vnsa7221

2016/10/19 09:28

kei344さん回答ありがとうございました。 1)の部分は使用している画像が他の3枚とサイズが異なっていた点 2)の部分はボタンをクリックすれば動くことができ、さらに自動でスライドができるようにしたかったのですが、bxsliderのオプション部分でauto: trueを設定するだけという、単純なミスによるものでした。こちらの表記が不十分であったために分かりにくくて申しわけありませんでした。今回すぐに回答してくださったので、ベストアンサーにさせていただきました。次また不明な点等ございましたらまたアドバイスいただけると非常にありがたいです。ありがとうございました。

kei344

2016/10/19 09:38

とりあえず解決したようでよかったです。ただ、フォルダ構成が問題なかったのであれば、解決方法を回答欄に書いて自己解決という方法もあります。（回答が付いたからといって別にベストアンサーにする必要があるわけではないので。役に立ったのなら選べばよいです）あと、質問において、「うまく動かない」「エラーが出る」という表現を皆さんよく使いますが、（気持ちはわかるのですが）その言葉に情報量は0です。（何も問題が無ければ質問するし無いはずなので）「何をしたときに」「どうなると思って」「どうなったのか」を出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。エラーは（ご存知かもしれませんが） JavaScriptの場合デベロッパーツール（開発者ツール）を利用すれば確認出来ます。【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】 http://ryus.co.jp/blog/customize-php-search-1/ 【Chrome デベロッパーツールの使い方概要 | Web Tips】 http://weback.net/utility/1410/ > 次また不明な点等ございましたらまたアドバイスいただけると非常にありがたいです。私のわかる範囲であれば喜んで。

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