アローアイコン付きレスポンシブ対応のスライダー

アローアイコン付きでレスポンシブ対応のスライダーです。ただ、画像にしか対応していません…

Source Code

右上の「コピー」からご利用ください。

コピー
<div class="my-parts"> <ul class="my-parts-items"> <li class="my-parts-item"><img src="https://haniwaman.com/parts/wp-content/uploads/2018/02/slide_960_300.jpg"></li> <li class="my-parts-item"><img src="https://haniwaman.com/parts/wp-content/uploads/2018/02/slide_960_300_2.jpg"></li> <li class="my-parts-item"><img src="https://haniwaman.com/parts/wp-content/uploads/2018/02/slide_960_300_3.jpg"></li> </ul> <div class="my-parts-prev"></div> <div class="my-parts-next"></div> </div>
コピー
.my-parts { position: relative; max-width: 100%; width: 100%; padding: 0; margin: 0 auto; display: inline-block; overflow: hidden; } .my-parts-items { position: absolute; top: 0; left: 0; padding: 0; margin: 0; list-style: none; } .my-parts-items .my-parts-items::after { display: block; content: ''; clear: both; } .my-parts-items .my-parts-item { float: left; text-align: center; } .my-parts-items .my-parts-item img { width: 100%; height: auto; box-shadow: none; } .my-parts-next { position: absolute; top: 50%; right: .8em; cursor: pointer; width: 24px; height: 24px; font-size: 24px; border-right: 0.24em solid #E91E63; border-bottom: 0.24em solid #E91E63; transform: translateY(-50%) rotate(-45deg); background: transparent; } .my-parts-prev { position: absolute; top: 50%; left: .8em; cursor: pointer; width: 24px; height: 24px; font-size: 24px; border-right: 0.24em solid #E91E63; border-bottom: 0.24em solid #E91E63; transform: translateY(-50%) rotate(135deg); background: transparent; }

Webパーツ屋とは?

HTMLとCSSをコピペで貼り付ければ実装できるコードをストックしているところです。「このデザインってどうやって実装するんだっけなぁ。。。」と調べる無駄な時間や自分で1からコーディングする時間を短縮することが目的です。

コーディングなんて所詮はデザインにそってHTMLやCSSを当てはめていくだけの単純作業です。当サービス「Webパーツ屋」をご活用いただきスピーディなコーディングを行なっていきましょう!

免責事項

  • すべての環境において同一の表示になるとは限りません。環境に応じてコードは書き換えてください。
  • 当サイト「Webパーツ屋」内のコードは自由に利用していただいて構いませんが、使用したことで何かしらのトラブルが発生しても、管理人のわたしは一切の責任を負わないことをご了承ください。
  • 基本的にはChromeでしか動作確認していません...。