アローアイコン付きレスポンシブ対応のスライダー
アローアイコン付きでレスポンシブ対応のスライダーです。ただ、画像にしか対応していません…
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;
}