・カルーセルを実行したい
・シンプルなのでいい
・レスポンシブのカルーセルを実装したい
なんて人のためのカルーセル・スライダーをCSSで実装する方法をご紹介します。
左右の矢印や下部に表示するインジケータをなくし見た目をスッキリしていますので、飽きがこないカルーセル・スライダーになっています。
コード量も少なく簡単に実装することができます。これらを実際のサンプルと交えて解説していきます。
カルーセルのサンプル
サンプルコード
サンプルのコードはHTML、CSSの2種類です。順に解説していきます。
HTML
<div class="sample">
<ul>
<li><a href="https://sunliblog.com/2022/04/07/stop-stripe/"><img class="alignnone size-medium wp-image-1524" src="http://sunliblog.com/wp-content/uploads/2022/04/IMG_1321-300x157.png" alt="Stripeのアカウント停止理由と解決策" width="300" height="157" /></a></li>
<li><a href="https://sunliblog.com/2021/12/01/freelance/"><img class="alignnone size-medium wp-image-1527" src="http://sunliblog.com/wp-content/uploads/2021/12/IMG_1327-300x157.png" alt="フリーランスで生きるためにスキルを身に付け今をどう生きるか。【人生の選択は慎重に】." width="300" height="157" /></a></li>
<li><a href="https://sunliblog.com/2021/11/07/cigarettes-point/"><img class="alignnone size-medium wp-image-1523" src="http://sunliblog.com/wp-content/uploads/2021/11/570F06E8-7D40-45EE-B503-B2365EAE678C-300x157.png" alt="【CLUB JT】タバコを買ってポイントが還元されるキャンペーンの利用方法【当選しました】" width="300" height="157" /></a></li>
<li><a href="https://sunliblog.com/2022/04/21/start-sweatcoin/"><img class="alignnone size-medium wp-image-1680" src="http://sunliblog.com/wp-content/uploads/2022/04/IMG_1387-300x169.png" alt="歩いて始める仮想通貨【Sweatcoin】日本でまだ広まってない内に始めよう！" width="300" height="169" /></a></li>
<li><a href="https://sunliblog.com/2022/01/15/english-master/"><img class="alignnone size-medium wp-image-1829" src="http://sunliblog.com/wp-content/uploads/2022/01/IMG_1645-300x169.png" alt="【語学習得】なら、この独学勉強法をこなす。3ステップで飛躍的に伸ばす方法" width="300" height="169" /></a></li>
</ul>
</div>
CSS
.sample ul{
display: flex;
overflow-x: scroll;
margin: 0;
padding: 0;
}
.sample li{
min-width: 40%;
margin: 50px;
padding: 0;
list-style: none;
}
カルーセルの画像を増やす方法
<ul> 〜 </ul>の中に下記のHTMLコードを組み込むことで画像やリンク付き画像を増やすことができます。
<li>スライドさせたい画像</li>
