| .slider-container { | |
| overflow: hidden; | |
| position: relative; | |
| width: 300px; /* Your fixed width */ | |
| height: 200px; /* Your fixed height */ | |
| } | |
| .content { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| transition: transform 0.5s ease-in-out; | |
| } | |
| .slide-in { | |
| transform: translateX(100%); | |
| } | |
| .slide-out { | |
| transform: translateX(-100%); | |
| } | |
| .entering .content { | |
| z-index: 1; | |
| } | |
| .entering .slide-in { | |
| transform: translateX(0); | |
| } | |
| /* Additional style to make sure exiting content slides out while entering content slides in */ | |
| .exiting .slide-out { | |
| transform: translateX(-100%); | |
| } | |