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 }
あなたの回答
tips
プレビュー