実現したいこと
slickというjQueryプラグインを使ってスライダーを作っています。
参考：slick
- PCの時は3個並べて1つずつ入れ替わる
- スマホの時は1つしか表示しないで、1つずつが入れ替わる
という挙動にしたいのですがPCは問題なく3個になるものの、SPはデベロッパーツールでサイズをiphoneSEにしたときは1つなのに、その状態(iPhoneSEのまま)でリロードすると1個がすごく細く、PCのように3つ並びになってしまいます。
スライダー1枚の幅をCSSで変更するようにしてみたのですが、widthが!impotantを付けても効きません。
HTML, CSS, JSを添付しますので、何かヒントなど、お気づきの点がありましたらぜひご教授ください。よろしくお願いします。
HTML
html
1 <section class="Card">2 <div class="CardList">3 <div class="CardListItem">4 <h3>5 サンプル見出しサンプル見出し 6 </h3>7 <ul>8 <li>サンプルサンプル</li>9 <li>サンプルサンプル</li>10 </ul>11 </div>12 <div class="CardListItem">13 <h3>14 サンプル見出しサンプル見出し 15 </h3>16 <ul>17 <li>サンプルサンプル</li>18 <li>サンプルサンプル</li>19 </ul>20 </div>21 <div class="CardListItem">22 <h3>23 サンプル見出しサンプル見出し 24 </h3>25 <ul>26 <li>サンプルサンプル</li>27 <li>サンプルサンプル</li>28 </ul>29 </div>30 <div class="CardListItem">31 <h3>32 サンプル見出しサンプル見出し 33 </h3>34 <ul>35 <li>サンプルサンプル</li>36 <li>サンプルサンプル</li>37 </ul>38 </div>39 </div>40 </section>
CSS(Sass)
Sass
1.Card {2 width: 100%;3 height: auto;4 padding: 6rem 0;5}6 7.CardList {8 max-width: 80rem;9 margin: 4.8rem auto 0;10 display: flex;11 @media (max-width: 768px) {12 max-width: 24.4rem;13 }14}15 16.CardListItem {17 margin: 0 1.5rem;18 width: calc((100% - 9rem) / 3);19 background-color: var(--white);20 border-radius: 4px;21 box-shadow: 2px 4px 8px #00000029;22 23 @media (max-width: 768px) {24 margin: 0 1rem;25 }26 27 h3 {28 background-color: #CCC;29 padding: 1.6rem 1.4rem;30 font-size: 1.4rem;31 border-radius: 4px 4px 0px 0px;32 margin: 0;33 &::before {34 display: none;35 }36 }37 38 ul {39 padding: 1.6rem 1.4rem;40 li {41 font-size: 1.2rem;42 margin: 0 0 .8rem 0;43 }44 }45}46 47 48 49.slick-prev {50 left: -3rem;51 @media (max-width: 768px) {52 left: -3rem;53 }54 &:before {55 color: #404040;56 }57}58.slick-next {59 right: -2rem;60 @media (max-width: 768px) {61 right: -3rem;62 }63 &:before {64 color: #404040;65 }66}67 68.slick-list.draggable {69 padding: 1rem 0;70 @media (max-width: 768px) {71 max-width: 24.4rem;72 }73}
jQuery
jQuery
1$('.CardList').slick({ 2 dots: true, 3 infinite: true, 4 autoplay: true, 5 autoplaySpeed: 2000, 6 speed: 300, 7 slidesToShow: 3, 8 slidesToScroll: 1, 9 responsive: [ 10 { 11 breakpoint: 769, 12 settings: { 13 slidesToShow: 1, 14 slidesToScroll: 1 15 } 16 } 17 ] 18});
0 コメント