質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

9177閲覧

slickスライダーで画像表示枠可変

sakio6

総合スコア47

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/07/24 06:33

前提・実現したいこと

slickスライダーを使用して、画像のスライドを作成しており、
画像表示数をオプションの「slidesToShow」で指定をしています。
オプションで指定された枚数以下の画像数の時、スライドの枠?
は画像数に合わせて幅を縮めたいです。

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

スライド画像の枠(今回リストなので「ul」部分になります)が
画像枚数に合わせて可変しない為困っております。

該当のソースコード

html

1<div class="slide-box"> 2 <ul class="slider clearfix"> 3 <li> 4 <a href="hogehoge.html"> 5 <img src="img/hogehoge.jpg"> 6 </a> 7 </li> 8 <li> 9 <a href="hogehoge.html"> 10 <img src="img/hogehoge.jpg"> 11 </a> 12 </li> 13 <li> 14 <a href="hogehoge.html"> 15 <img src="img/hogehoge.jpg"> 16 </a> 17 </li> 18 </ul> 19 20</div>

Javascript

1<script> 2$('.slider').slick({ 3 infinite: true, 4 slidesToShow: 9, 5 slidesToScroll: 1, 6 autoplay: false, 7 autoplaySpeed: 0, 8 cssEase: 'linear', 9 speed: 100, 10 accessibility: true 11}); 12</script>

試したこと

「ul」の部分がslick.cssで【display: block;】でしたので、中身によって幅が変わるように【display: inline-block;】に変更しました。「ul」部分の幅は画像の数に合わせて狭まったのですが、画像自体も半分以下に縮小されてしまいました。

画像の幅を固定するためにslickのオプション「variableWidth」を指定して、「li」の幅を指定、「img」を100%指定しましたら、「ul」部分がかなり横に長くなりブラウザからはみ出ました。
また、「li」部分も何故か自動で横幅が入りかなり大きくなってしまいました。

CSS

1 .slide-box ul { 2 display: inline-block; 3 } 4 5 .slide-box ul li { 6 max-width: 80px; 7 } 8 9 .slide-box ul li img { 10 width: 100%; 11 }

javascript

1<script> 2$('.slider').slick({ 3 infinite: true, 4 slidesToShow: 9, 5 slidesToScroll: 1, 6 autoplay: false, 7 autoplaySpeed: 0, 8 cssEase: 'linear', 9 speed: 100, 10 variableWidth: true. 11 accessibility: true 12}); 13</script>

補足情報(FW/ツールのバージョンなど)

同じ様な設定を行ったことがある方、改善方法ご存知の方いらっしゃいましたら、
ご教示ください。
また、足りない情報等御座いましたら、お知らせいただけますと幸いです。

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<li> タグの数を数えてオプションに入れてやれば良いのではないでしょうか。
var $slider = $('.slider'); var slideCount = $slider.children('li').length; $slider.slick({ infinite: true, slidesToShow: Math.min(9, slideCount), slidesToScroll: 1, autoplay: false, autoplaySpeed: 0, cssEase: 'linear', speed: 100, accessibility: true });

投稿2018/07/24 07:36

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakio6

2018/07/24 09:24

yhg様 ありがとうございます。 スライド表示領域内を画像枚数に合わせることは出来ませんでしたが、 領域内に均等に画像を並べることが出来ました。 見た目的にもこちらがよかったです。 発想を変えることで導けそうな解決方法でしたが、まったくそんな発想は出てこず勉強不足を痛感しました。 また機会が御座いましたら、ご教示頂けますと幸いです。 大変助かりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問