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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

CSS

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

Q&A

解決済

2回答

7329閲覧

slick.jsの横幅指定について

begenner

総合スコア79

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

CSS

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

0グッド

0クリップ

投稿2018/06/07 12:20

編集2018/06/08 01:57

現在各商品の詳細画面の作成をしています。
サムネイル付きのスライドショー導入のためにslick.jsをRailsのgemなしで導入しました(cssを直接いじる可能性があるため)。
機能の実装はできたのですが、slickの影響と思われるcssの余白が予想以上に横に伸びてしまいます。

  • 左側に画像
  • 右側に説明

といった形で表示したいのですがうまくいきません(m_ _m)
(レスポンス対応は後々やっていく予定ですが、現在はPC表示に焦点を当てています)

わかる方がいらっしゃれば教えていただきますようよろしくお願いいたします(m_ _m)

###期待する動作
cssを制御し上記のレイアウトを適用したい

###動作環境
Ruby:2.3.5
Ruby on Rails: 4.2.5
slick: 不明(2018.5 にダウンロードしました)
turbolink(gem): 5.1~

###試したこと
カルーセル提要範囲のラッパーに自作のcss(border-image)を当てて対応しようとしました。
サムネイル部分に関しては問題がないのですがメイン画像には適用されません

###該当のソースコード(コード量が多いですが宜しくお願いしますm_ _m)

app/views/items/preview.html.erb

ruby

1<div class="border-image"> 2 <!-- スライドショー部分 --> 3 <!-- ↓スライダー本体 --> 4 <div class="slider thumb-item"> 5 <div><img src="image1.jpg"></div> 6 <div><img src="image2.jpg"></div> 7 <div><img src="image3.jpg"></div> 8 </div> 9 <!-- ↓サムネイル --> 10 <div class="thumb-item-nav"> 11 <div><img src="image1.jpg"></div> 12 <div><img src="image2.jpg"></div> 13 <div><img src="image3.jpg"></div> 14 </div> 15</div> 16<script type="text/javascript"> 17$(document).on('turbolinks:load', function() { 18 $('.thumb-item').slick({ 19 infinite: true, 20 slidesToShow: 1, 21 slidesToScroll: 1, 22 arrows: false, 23 fade: true, 24 asNavFor: '.thumb-item-nav', 25 respondTo: 'min' 26 }); 27 $('.thumb-item-nav').slick({ 28 infinite: true, 29 slidesToShow: 3, 30 slidesToScroll: 1, 31 asNavFor: '.thumb-item', 32 focusOnSelect: true, 33 }); 34}); 35</script>

app/assets/stylesheets/items.css

scss

1.main{ 2 width: 780px; 3} 4 5main.preview{ 6 // オーバーラップ用css 7 .border-image{ 8 width: 300px; 9 height: 300px; 10 padding: 0; 11 margin: 0; 12 13 /*カルーセル*/ 14 .slider { 15 margin: 0px; 16 } 17 .slider img { 18 19 } 20 .single-item { 21 /*max-width: 600px;*/ 22 /*margin: 0 auto 50px;*/ 23 } 24 .slick-prev::before, .slick-next::before { 25 font-size: 24px; 26 } 27 .lazy-item .slick-next, 28 .thumb-item-nav .slick-next, 29 .multiple-item .slick-next, 30 .center-item .slick-next { 31 right: 20px; 32 z-index: 99; 33 } 34 .lazy-item .slick-prev, 35 .thumb-item-nav .slick-prev, 36 .multiple-item .slick-prev, 37 .center-item .slick-prev { 38 left: 15px; 39 z-index: 100; 40 } 41 .single-item .slick-prev::before, 42 .single-item .slick-next::before { 43 color: #666; 44 } 45 .slick-dots { 46 bottom:-25px; 47 } 48 49 .thumb-item { 50 display: flex; 51 width: 300px; 52 height: 300px; 53 } 54 .thumb-item-nav { 55 /*display: flex;*/ 56 width: 300px; 57 height:100px; 58 margin: 0; 59 padding: 0; 60 } 61 .slick-track{ 62 width: 300px; 63 } 64 /*.thumb-item-nav li{*/ 65 /*margin: 5px;*/ 66 /*}*/ 67 .lazy-item { 68 /*width: 300px;*/ 69 margin: 0 auto 50px; 70 } 71 .lazy-item li { 72 margin: 0 5px; 73 } 74 // 自作 75 div.slider .thumb-item .slick-initialized .slick-slider{ 76 width: 300px; 77 } 78 }//border-image 79 80 .setumei{ 81 width: 350px; 82 } 83 }//.preview

ブラウザ上で表示されたコード(できるだけ見やすいようにインデント)
(コード量が多いことはご了承ください)

ruby

1<div class="border-image"> 2 <!-- スライドショー部分 --> 3 <!-- ↓スライダー本体 --> 4 <div class="slider thumb-item slick-initialized slick-slider"> 5 <div class="slick-list draggable"> 6 ::before == $0 7 <div class="slick-track" style="opacity: 1; width: 900px;"> 8 <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 300px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"> 9 <img src="1.jpg"> 10 </div> 11 <div class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" style="width: 300px; position: relative; left: -300px; top: 0px; z-index: 998; opacity: 0;"> 12 <img src="2.jpg"> 13 </div> 14 <div class="slick-slide" data-slick-index="2" aria-hidden="true" tabindex="-1" style="width: 300px; position: relative; left: -600px; top: 0px; z-index: 998; opacity: 0;"> 15 <img src="3.jpg"> 16 </div> 17 </div> 18 </div> 19 </div> 20 <!-- ↓サムネイル --> 21 <div class="thumb-item-nav slick-initialized slick-slider"> 22 <div class="slick-list draggable"> 23 <div class="slick-track" style="opacity: 1; width: 300px; transform: translate3d(0px, 0px, 0px);"> 24 <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 100px;"> 25 <img src="1.jpg"> 26 </div> 27 <div class="slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="0" style="width: 100px;"> 28 <img src="2.jpg"> 29 </div> 30 <div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="0" style="width: 100px;"> 31 <img src="3.jpg"> 32 </div> 33 </div> 34 </div> 35 </div> 36</div>

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

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

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

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

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

guest

回答2

0

自己解決

Railsにbootstrapを適用させていたことが原因でした。

<div class="border-image"> を <div class="border-image col-md-5"> のようにbootstrapによる幅指定を行ったことで問題なく動作しました。

投稿2018/07/03 02:09

begenner

総合スコア79

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

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

0

cssの詳細度負けをしているように思えます。
cssの詳細度を絞り込んでみてはいかがでしょうか。

投稿2018/06/07 21:37

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

begenner

2018/06/07 23:13

ブラウザのコンソールで現在確認するとラッパーのdiv.border-imageの部分で横に伸びてしまっている仕様になっていました。 明示的にmargin, padding に0 を指定し コンソール側でも margin, padding ともに0 であるにもかかわらずこのような事象がおこるのかわかりません(m_ _m) 何が原因だと思われますでしょうか?
begenner

2018/06/08 01:59

今気づいたのですがブラウザコンソールで詳細を確認すると なぜかmarginだけがdiv.imageの範囲内には焦点が当たらず、右側にずれている形になってしまっています 明示的にmargin, padding に0 としているのは変わらないのですがわかりません(m_ _m)
退会済みユーザー

退会済みユーザー

2018/06/08 09:09

うーん。実際の挙動を見てみたいと分からないですね。。 現状ローカル環境での開発ですよね??
begenner

2018/06/09 06:23

ローカルで開発しています。
begenner

2018/07/03 02:10

bootstrapを適用していたことが原因だったようです。ご丁寧な対応ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問