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

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

ただいまの
回答率

90.33%

  • JavaScript

    17590questions

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

  • jQuery

    7124questions

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

  • CSS

    6226questions

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

  • Ruby on Rails 4

    2466questions

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

  • jQueryプラグイン

    545questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 451

begenner

score 31

現在各商品の詳細画面の作成をしています。
サムネイル付きのスライドショー導入のために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

<div class="border-image">
  <!-- スライドショー部分 -->
  <!-- ↓スライダー本体 -->
    <div class="slider thumb-item">
        <div><img src="image1.jpg"></div>
        <div><img src="image2.jpg"></div>
        <div><img src="image3.jpg"></div>
    </div>
    <!-- ↓サムネイル -->
    <div class="thumb-item-nav">
        <div><img src="image1.jpg"></div>
        <div><img src="image2.jpg"></div>
        <div><img src="image3.jpg"></div>
    </div>
</div>
<script type="text/javascript">
$(document).on('turbolinks:load', function() {
    $('.thumb-item').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.thumb-item-nav',
        respondTo: 'min'
    });
    $('.thumb-item-nav').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.thumb-item',
        focusOnSelect: true,
    });
});
</script>

app/assets/stylesheets/items.css

.main{
   width: 780px;
}

main.preview{
    // オーバーラップ用css
    .border-image{
      width: 300px;
      height: 300px;
      padding: 0;
      margin: 0;

      /*カルーセル*/
      .slider {
        margin: 0px;
      }
      .slider img {

      }
      .single-item {
        /*max-width: 600px;*/
        /*margin: 0 auto 50px;*/
      }
      .slick-prev::before, .slick-next::before {
        font-size: 24px;
      }
      .lazy-item .slick-next,
      .thumb-item-nav .slick-next,
      .multiple-item .slick-next,
      .center-item .slick-next {
        right: 20px;
        z-index: 99;
      }
      .lazy-item .slick-prev,
      .thumb-item-nav .slick-prev,
      .multiple-item .slick-prev,
      .center-item .slick-prev {
        left: 15px;
        z-index: 100;
      }
      .single-item .slick-prev::before,
      .single-item .slick-next::before {
        color: #666;
      }
      .slick-dots {
        bottom:-25px;
      }

      .thumb-item {
        display: flex;
        width: 300px;
        height: 300px;
      }
      .thumb-item-nav {
        /*display: flex;*/
        width: 300px;
        height:100px;
        margin: 0;
        padding: 0;
      }
      .slick-track{
        width: 300px;
      }
      /*.thumb-item-nav li{*/
      /*margin: 5px;*/
      /*}*/
      .lazy-item {
        /*width: 300px;*/
        margin: 0   auto 50px;
      }
      .lazy-item li {
        margin: 0 5px;
      }
    //  自作
      div.slider .thumb-item .slick-initialized .slick-slider{
        width: 300px;
      }
    }//border-image

    .setumei{
      width: 350px;
    }
  }//.preview

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

<div class="border-image">
  <!-- スライドショー部分 -->
  <!-- ↓スライダー本体 -->
    <div class="slider thumb-item slick-initialized slick-slider">
      <div class="slick-list draggable">
        ::before == $0
         <div class="slick-track" style="opacity: 1; width: 900px;">
           <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;">
              <img src="1.jpg">
           </div>
           <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;">
             <img src="2.jpg">
           </div>
           <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;">
             <img src="3.jpg">
           </div>
         </div>
       </div>
    </div>
    <!-- ↓サムネイル -->
    <div class="thumb-item-nav slick-initialized slick-slider">
        <div class="slick-list draggable">
          <div class="slick-track" style="opacity: 1; width: 300px; transform: translate3d(0px, 0px, 0px);">
            <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 100px;">
               <img src="1.jpg">
            </div>
            <div class="slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="0" style="width: 100px;">
               <img src="2.jpg">
            </div>
            <div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="0" style="width: 100px;">
              <img src="3.jpg">
            </div>
          </div>
        </div>
    </div>
</div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

+1

Railsにbootstrapを適用させていたことが原因でした。
<div class="border-image">

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/08 08:13

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

    キャンセル

  • 2018/06/08 10:59

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

    キャンセル

  • 2018/06/08 18:09

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

    キャンセル

  • 2018/06/09 15:23

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

    キャンセル

  • 2018/07/03 11:10

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

    キャンセル

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

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17590questions

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

  • jQuery

    7124questions

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

  • CSS

    6226questions

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

  • Ruby on Rails 4

    2466questions

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

  • jQueryプラグイン

    545questions

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