Slider Proの画像のwidthをautoにできません。

jQueryプラグイン「Slider Pro」でカルーセルスライダーを作ろうと思っています。
動かすところまではできたのですが、画像をトリミングしない方法が分かりません。

公式サイトのexample2のように、
高さを合わせてwidthはautoにしたいのですが、うまくできません。

Slider Proのexample2
http://bqworks.com/slider-pro/#example2

GitHubなどに載っていたコードを参考に、下記のオプション設定をしたのですが、
これですと画像が300×300でトリミングされてしまいます。

<script type="text/javascript">
    jQuery( document ).ready(function( $ ) {
        $( '#slider1' ).sliderPro({
            width: 300,
            height: 300,
            visibleSize: '100%',
            forceSize: 'fullWidth',
            autoSlideSize: true,
        });
 });
</script>

教えていただけたら幸いです。よろしくお願いいたします。

jsdo.itでテストしてみました。
初めて使ったのでこれで合っているか不安なのですが、ご指摘いただけますでしょうか。
http://jsdo.it/shehers/494X

kei344

2017/05/25 04:55

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

she

2017/05/25 07:19

ありがとうございます。コンソールには特にエラーはありませんでした…

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

回答3件

ベストアンサー

動くサンプル：https://jsfiddle.net/bj3b7nLb/

提示のコードで「高さ固定」は出来ますね。
他のCSSでなにかしていませんか？デベロッパーツールで確認してみてください。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

投稿2017/05/25 17:12

kei344

総合スコア69400

間違えてSlider Proの古いバージョンをダウンロードしてしまっていたようで、新しく上げたら直ってしまいました・・・たくさんの方にご協力いただいたのに本当にすみません・・・本当にありがとうございました。

投稿2017/05/25 17:24

she

総合スコア10

そのコードでOKなんですが。。。
});の不足は転記の際のミスだと思うので
autoSlideSize: trueの後に何か入れていませんか？
入れている場合は閉じ忘れ？([,]の入れ忘れ)。

投稿2017/05/24 21:16

kyunta

総合スコア350

she

2017/05/25 03:11

ご回答ありがとうございます。すみません転記をミスしていました。実際は下記のように書いています。 <script type="text/javascript"> jQuery( document ).ready(function( $ ) { $( '#slider1' ).sliderPro({ width: 300, height: 300, visibleSize: '100%', forceSize: 'fullWidth', autoSlideSize: true, }); }); </script> よろしくお願いいたします。

gin

2017/05/25 04:47

「autoSlideSize: true,」のカンマが不要ではないですか？削除して試してみてください。

kyunta

2017/05/25 06:38

sheさん、紛らわしい表現で申し訳ありません。 ginさんのご指摘通り「,」は不要です。 ginさん、その節は大変ご迷惑をお掛けして申し訳ありませんでした。今回も紛らわしい表現で申し訳ありません。症状としては autoSlideSize: true が効いていないようでしたので、その後に他の設定を書き込む(,で区切らずに)とエラーになると思うのですが、エラーにはならない何かの記述が出来てしまってそれが原因で機能していないとかもあるのかなと思ってしまいました。提示されていたコード自体に問題は無さそうでしたので色々想像して、こんな表現になってしまって、今読み返してみると変ですね^^;

gin

2017/05/25 06:44

いえいえ、kyuntaさんの意図はくめてます^^ 自分のコメントはsheさんのコードに対してですこちらこそ自分のコメント頭に「> sheさん」などとつけておくべきでしたね^^;

she

2017/05/25 07:13

こちらこそそもそもこんな質問をしてしまいすみません…私の質問もわかりづらいかと思いましたので編集しました。最後の,は不要ということですよね。取ってみたのですが変わりませんでした…すみません…。

kyunta

2017/05/25 07:26

sheさんが提示されているコード自体は問題ないと思いますので、その他のHTML,CSSなど症状を再現できるコードを提示すれば、正確な回答を頂けると思います。私なんか最初の頃に大ボケやってginさんにとんでもないご迷惑をお掛けしてますから^^;

gin

2017/05/25 07:48

んー、では一度「width: 300,」を「width: 'auto',」に変更してみましょうか