1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- .slider {
- /* overflow-x: hidden; */
- /* overflow-y: hidden; */
- overflow: hidden;
- width: 60%;
- margin: 0 auto;
- position: relative;
- height: 700px;
- }
- .slider__wrapper {
- display: flex;
- height: 100%;
- transition: 300ms ease transform;
- transform: translateX(calc(-1 * var(--x, 0) * 100%));
- }
- .slider__slide {
- flex: 1 0 100%;
- }
- .img {
- height: 100%;
- width: 100%;
- object-fit: cover;
- display: block;
- }
- .slider__left-btn,
- .slider__right-btn {
- fill: white;
- position: absolute;
- top: 0;
- width: 80px;
- background: transparent;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- border: 0;
- transition: 300ms ease background;
- }
- .slider__left-btn:hover,
- .slider__right-btn:hover {
- background: #0001;
- }
- .slider__left-btn {
- left: 0;
- }
- .slider__right-btn {
- right: 0;
- }
- .slider__dots {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- bottom: 16px;
- display: flex;
- gap: 20px;
- }
- .slider__dot {
- width: 16px;
- height: 16px;
- background: white;
- border-radius: 9999px;
- border: none;
- }
- .slider__dot.current {
- background: cyan;
- }
|