.slider {
overflow: hidden;
}
.slides {
display: flex;
width: 300%; /* 画像の数に応じて調整 */
}
.slides input {
display: none;
}
.slide {
width: 33.33%; /* 画像の数に応じて調整 */
transition: 2s;
}
.slide img {
width: 100%;
height: auto;
}
/* ナビゲーション用のスタイル */
.navigation-auto {
position: absolute;
width: 100%;
margin-top: -40px;
display: flex;
justify-content: center;
}
.navigation-auto div {
border: 2px solid #fff;
padding: 5px;
transition: 1s;
cursor: pointer;
}
.navigation-auto div:not(:last-child) {
margin-right: 5px;
}
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -100%;
}
#radio3:checked ~ .first {
margin-left: -200%;
}
