BanbaYa備忘録 HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ
参照元 コリス
HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ
参照URL https://coliss.com/articles/build-websites/operation/css/css-only-carousel.html
@keyframes tonext {
75% {
left: 0;
}
95% {
left: 100%;
}
98% {
left: 100%;
}
99% {
left: 0;
}
}
@keyframes tostart {
75% {
left: 0;
}
95% {
left: –300%;
}
98% {
left: –300%;
}
99% {
left: 0;
}
}
@keyframes snap {
96% {
scroll–snap–align: center;
}
97% {
scroll–snap–align: none;
}
99% {
scroll–snap–align: none;
}
100% {
scroll–snap–align: center;
}
}
body {
max–width: 37.5rem;
margin: 0 auto;
padding: 0 1.25rem;
font–family: ‘Lato’, sans–serif;
}
* {
box–sizing: border–box;
scrollbar–color: transparent transparent; /* thumb and track color */
scrollbar–width: 0px;
}
*::–webkit–scrollbar {
width: 0;
}
*::–webkit–scrollbar–track {
background: transparent;
}
*::–webkit–scrollbar–thumb {
background: transparent;
border: none;
}
* {
–ms–overflow–style: none;
}
ol, li {
list–style: none;
margin: 0;
padding: 0;
}
.carousel {
position: relative;
padding–top: 75%;
filter: drop–shadow(0 0 10px #0003);
perspective: 100px;
}
.carousel__viewport {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
overflow–x: scroll;
counter–reset: item;
scroll–behavior: smooth;
scroll–snap–type: x mandatory;
}
.carousel__slide {
position: relative;
flex: 0 0 100%;
width: 100%;
background–color: #f99;
counter–increment: item;
}
.carousel__slide:nth–child(even) {
background–color: #99f;
}
.carousel__slide:before {
content: counter(item);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(–50%,–40%,70px);
color: #fff;
font–size: 2em;
}
.carousel__snapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
scroll–snap–align: center;
}
@media (hover: hover) {
.carousel__snapper {
animation–name: tonext, snap;
animation–timing–function: ease;
animation–duration: 4s;
animation–iteration–count: infinite;
}
.carousel__slide:last–child .carousel__snapper {
animation–name: tostart, snap;
}
}
@media (prefers–reduced–motion: reduce) {
.carousel__snapper {
animation–name: none;
}
}
.carousel:hover .carousel__snapper,
.carousel:focus–within .carousel__snapper {
animation–name: none;
}
.carousel__navigation {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text–align: center;
}
.carousel__navigation–list,
.carousel__navigation–item {
display: inline–block;
}
.carousel__navigation–button {
display: inline–block;
width: 1.5rem;
height: 1.5rem;
background–color: #333;
background–clip: content–box;
border: 0.25rem solid transparent;
border–radius: 50%;
font–size: 0;
transition: transform 0.1s;
}
.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
position: absolute;
top: 0;
margin–top: 37.5%;
width: 4rem;
height: 4rem;
transform: translateY(–50%);
border–radius: 50%;
font–size: 0;
outline: 0;
}
.carousel::before,
.carousel__prev {
left: –1rem;
}
.carousel::after,
.carousel__next {
right: –1rem;
}
.carousel::before,
.carousel::after {
content: ”;
z–index: 1;
background–color: #333;
background–size: 1.5rem 1.5rem;
background–repeat: no–repeat;
background–position: center center;
color: #fff;
font–size: 2.5rem;
line–height: 4rem;
text–align: center;
pointer–events: none;
}
.carousel::before {
background–image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 100 100′ xmlns=’https://ift.tt/2u2ZOcc points=’0,50 80,100 80,0′ fill=’%23fff’/%3E%3C/svg%3E”);
}
.carousel::after {
background–image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 100 100′ xmlns=’https://ift.tt/2u2ZOcc points=’100,50 20,100 20,0′ fill=’%23fff’/%3E%3C/svg%3E”);
}
@memo
webデザイン
https://ift.tt/2FQJnCd
January 15, 2020 at 09:26AM
