0
グリッド内の4列の行にそれぞれ4つの画像とテキストがあります。モバイル画面の場合、これは非常に小さく見えないため、見栄えが悪いので、4つの列と画像をモバイル画面のスライダーに変換したいので、ユーザーがスワイプするまでに1つの画像とそのテキストのみが表示されますまたは、画像のスライダスタイルを実現するにはどうすればいいですか？をクリックして、すべてを1行に非常に小さく表示しないでください。カルーセルスライダ内の画像にクラスを動的に追加する
.wrapper {
max-width: 90%;
position:relative;
margin:0 auto;
text-align:center;
}
.grid {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 1340px;
}
.grid__col {
padding-right: 16px;
padding-left: 16px;
&.no-pad{
padding: 0;
}
&--1-4-s {
width: percentage(1/4);
}
&--2-4-s {
width: percentage(2/4);
}
&--3-4-s {
width: percentage(3/4);
}
&--4-4-s {
width: 100%;
}
@media (min-width: 740px) {
&--1-4-m {
width: percentage(1/4);
} // 25%
&--1-3-m {
width: percentage(1/3);
}
&--2-4-m {
width: percentage(2/4);
}
&--3-4-m {
width: percentage(3/4);
}
}
@media (min-width: 980px) {
&--1-4-l {
width: percentage(1/4);
}
&--2-4-l {
width: percentage(2/4);
}
&--3-4-l {
width: percentage(3/4);
}
}
&--end {
margin-left: auto;
}
&--content-centered {
margin: 0 auto;
}
}
.image-text {
max-width: 200px;
font-weight: 400;
}<div class="wrapper">
<h1>This is a title</h1>
<p>This is some description</p>
<div class="grid">
<div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--4-4-s'>
<img src='http://via.placeholder.com/200x150'>
<p class="image-text">Image 1 Text</p>
</div>
<div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--4-4-s'>
<img src='http://via.placeholder.com/200x150'>
<p class="image-text">Image 2 Text</p>
</div>
<div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--4-4-s'>
<img src='http://via.placeholder.com/200x150'>
<p class="image-text">Image 3 Text</p>
</div>
<div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s grid__col--end'>
<img src='http://via.placeholder.com/200x150'>
<p class="image-text">Image 4 Text</p>
</div>
</div>
</div>
（サードパーティのライブラリを使用して）スライダを作成し、デスクトップ用に非表示にすることをお勧めします。モバイルのためにそれを表示し、既に（あなたの質問に表示されている）グリッドレイアウトを隠す。簡単に行く、コードのリース操作、クリーンなコーディングも –