### 前提・実現したいことスライドショーの写真配置を調整したい。 ### 発生している問題・エラーメッセージ現在 ![イメージ説明](b4d06ed355a47bef6ab7d960e7fdb6e4.png) 理想赤線のところで画面が見切れるようにしたいです。 ![イメージ説明](acc36d86635df921289f5ce18197d4ff.png) ### 該当のソースコード ```html

``` ```css .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/ width:90%; margin:0 auto; } .slider img { width:100%;/*スライダー内の画像を横幅100%に*/ height:auto; } /*slickのJSで書かれるタグ内、スライド左右の余白調整*/ .slider .slick-slide { margin:0 10px; } /*矢印の設定*/ /*戻る、次へ矢印の位置*/ .slick-prev, .slick-next { position: absolute;/*絶対配置にする*/ top: 42%; cursor: pointer;/*マウスカーソルを指マークに*/ outline: none;/*クリックをしたら出てくる枠線を消す*/ border-top: 2px solid #666;/*矢印の色*/ border-right: 2px solid #666;/*矢印の色*/ height: 15px; width: 15px; } .slick-prev {/*戻る矢印の位置と形状*/ left: -1.5%; transform: rotate(-135deg); } .slick-next {/*次へ矢印の位置と形状*/ right: -1.5%; transform: rotate(45deg); } /*ドットナビゲーションの設定*/ .slick-dots { text-align:center; margin:20px 0 0 0; } .slick-dots li { display:inline-block; margin:0 5px; } .slick-dots button { color: transparent; outline: none; width:8px;/*ドットボタンのサイズ*/ height:8px;/*ドットボタンのサイズ*/ display:block; border-radius:50%; background:#ccc;/*ドットボタンの色*/ } .slick-dots .slick-active button{ background:#333;/*ドットボタンの現在地表示の色*/ } ``` ```jQuery $('.slider').slick({ autoplay: true,//自動的に動き出すか。初期値はfalse。 infinite: true,//スライドをループさせるかどうか。初期値はtrue。 slidesToShow: 3,//スライドを画面に3枚見せる slidesToScroll: 3,//1回のスクロールで3枚の写真を移動して見せる prevArrow: '

',//矢印部分PreviewのHTMLを変更 nextArrow: '

',//矢印部分NextのHTMLを変更 dots: true,//下部ドットナビゲーションの表示 responsive: [ { breakpoint: 769,//モニターの横幅が769px以下の見せ方 settings: { slidesToShow: 2,//スライドを画面に2枚見せる slidesToScroll: 2,//1回のスクロールで2枚の写真を移動して見せる } }, { breakpoint: 426,//モニターの横幅が426px以下の見せ方 settings: { slidesToShow: 1,//スライドを画面に1枚見せる slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる } } ] }); ``` ### 試したこと widthやjQをいじりましたが、左右の写真が均等に見切れる形にはできませんでした。 slickというライブラリを使用しております。どうぞよろしくお願い致します。

	@@ -1 +1 @@
1	- スライドショーの写真配置を調整したい。
1	+ 【jQライブラリのslick】スライドショーの写真配置を調整したい。

質問編集履歴