現在各商品の詳細画面の作成をしています。
サムネイル付きのスライドショー導入のために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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。