WEB デザイン

【コピペOK】CSSで実装するレスポンシブなカルーセル・スライダーを表示する

2022-04-15

記事内に商品プロモーションを含む場合があります

【コピペOK】CSSで実装するレスポンシブなカルーセル・スライダーを表示する

・カルーセルを実行したい
・シンプルなのでいい
・レスポンシブのカルーセルを実装したい

なんて人のためのカルーセル・スライダーをCSSで実装する方法をご紹介します。
左右の矢印や下部に表示するインジケータをなくし見た目をスッキリしていますので、飽きがこないカルーセル・スライダーになっています。
コード量も少なく簡単に実装することができます。これらを実際のサンプルと交えて解説していきます。

カルーセルのサンプル

  • Stripeのアカウント停止理由と解決策
  • フリーランスで生きるためにスキルを身に付け今をどう生きるか。【人生の選択は慎重に】.
  • 【CLUB JT】タバコを買ってポイントが還元されるキャンペーンの利用方法【当選しました】
  • 歩いて始める仮想通貨【Sweatcoin】日本でまだ広まってない内に始めよう!
  • 【語学習得】なら、この独学勉強法をこなす。3ステップで飛躍的に伸ばす方法

サンプルコード

サンプルのコードは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>

SEOとは

この記事が気に入ったら、サポートをしてみませんか?
  • この記事を書いた人

sunli

【FXで勝つには、量も質も大事。それとシンプルに考えること。】 FX 勝ち組トレーダーしか知らない必勝法をわかりやすくどういう目線で、リスクを最小限にして着実に結果を積み上げているのか、その方法を伝授しています。

-WEB, デザイン
-, , , ,