body, html { | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.slider-container { | |
width: 90%; | |
height: 80%; | |
overflow: hidden; | |
position: relative; | |
} | |
.slider { | |
display: flex; | |
width: calc(300% + 60px); /* 3 slides and 20px gap between them */ | |
transition: transform 0.5s ease-in-out; | |
} | |
.slide { | |
width: calc(33.3333% - 40px); /* minus gap */ | |
height: 100%; | |
margin: 0 20px; /* gap */ | |
background-color: #ccc; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 2em; | |
} | |