.universal-slider { position: relative; width: 100%; overflow: hidden; } .universal-slider .slider-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; -o-transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; width: 100%; } .universal-slider .slider-slide { -ms-flex-negative: 0; flex-shrink: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; } .universal-slider .slider-slide > * { width: 100%; height: auto; } .slider-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin-top: 20px; } /* Fallback for browsers without gap support */ .slider-pagination > * + * { margin-left: 8px; } .pagination-dot { width: 12px; height: 12px; border-radius: 50%; border: none; background: #ddd; cursor: pointer; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; outline: none; } .pagination-dot:hover { background: #4da6ff; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .pagination-dot.active { background: #007bff; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .pagination-dot:disabled { opacity: 0.5; cursor: not-allowed; } .slider-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #007bff; font-size: 20px; font-weight: bold; cursor: pointer; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); outline: none; } .slider-arrow:hover { background: rgba(255, 255, 255, 1); -webkit-transform: translateY(-50%) scale(1.1); -ms-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .slider-arrow:disabled { opacity: 0.5; cursor: not-allowed; -webkit-transform: translateY(-50%) scale(0.9); -ms-transform: translateY(-50%) scale(0.9); transform: translateY(-50%) scale(0.9); } .slider-arrow-prev { left: 10px; } .slider-arrow-next { right: 10px; } /* Fallback Internet Explorer */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .universal-slider .slider-container { display: -ms-flexbox; } .slider-pagination { display: -ms-flexbox; } .slider-arrow { display: -ms-flexbox; } }