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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

CSS

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

Q&A

0回答

1816閲覧

Slickでスライダー間の空白が作れない

Khy

総合スコア118

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

CSS

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

0グッド

0クリップ

投稿2019/04/27 03:26

Slickで勉強も兼ねて左右の画像がチラ見せされているようなスライダーを制作しております。
フレームワークにはVue.jsを使用しています。

以下のサイトのスマホ版でのスライダーを実装しようとしているのですが、画像間のマージンがうまく設定できません。
https://liver.kospro.jp/

.carousel_bgにmargin:0 20px;を設定したところスライドが全体的に右にずれ画像間の空白は変わりませんでした。

お知恵をお貸し頂けると助かります。

vue

1 <slick ref="slick" :options="slickOptions"> 2 <div class="carousel_bg bg1" > 3 <div class="carousel_content"> 4       テキスト1 5 </div> 6 </div> 7 <div class="carousel_bg bg2"> 8 <div class="carousel_content"> 9 テキスト2 10 </div> 11 </div> 12 <div class="carousel_bg bg3"> 13 <div class="carousel_content"> 14 テキスト3 15 </div> 16 </div> 17 </slick>
<script> export default { data(){ return{ // slickの設定 slickOptions: { dots: true, centerMode: true, centerPadding: '10%', slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '10%', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '10%', slidesToShow: 1 } } ] }, } }, } </script>

SCSS

1 .carousel_bg{ 2 background-size: cover; 3 background-position: center; 4 5 width: 100%; 6 height: 500px; 7 8 border-radius: 10px; 9 10 &.bg1{ 11 background-image: url("https://liver.kospro.jp/liver/wp-content/themes/yukos/img/bg/01.png"); 12 } 13 &.bg2{ 14 background-image: url("https://liver.kospro.jp/liver/wp-content/themes/yukos/img/bg/02.png"); 15 } 16 &.bg3{ 17 background-image: url("https://liver.kospro.jp/liver/wp-content/themes/yukos/img/bg/03.png"); 18 } 19 } 20 21 .carousel_content { 22 height: 500px; 23 border-radius: 10px; 24 color: #fff; 25 26 span { 27 width: 100%; 28 display: inline-block; 29 font-size: 4em; 30 text-align: center; 31 padding-top: 30px; 32 } 33 34 h3 { 35 text-align: center; 36 padding: 30px 25px 0 25px; 37 } 38 39 p { 40 padding: 50px 25px 0 25px; 41 } 42 }

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問