/*********************************/ .slider_one_big_picture { position: relative; width: 1280px; height: 768px; margin: 0 auto; user-select: none; /*overflow: hidden;*/ } .slider_one_big_picture > *{ transition: ease all 1s; } .slider_one_big_picture .hidden { opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; } .slider_one_big_picture .active { opacity: 1; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; } .slider_one_big_picture .prev1, .slider_one_big_picture .next1 { opacity: 0; position: absolute; top: 0px; left: 0px; width: 0px; height: 100%; z-index: 0; } .slider_one_big_picture .next1 { left: 1280px; } .slider_one_big_picture .prev2, .slider_one_big_picture .next2 { opacity: 0; position: absolute; top: 0px; left: 0px; width: 0px; height: 100%; z-index: 0; } .slider_one_big_picture .next2 { left: 1280px; } /*********************************/ .slider_circle_10 { position: relative; width: 1280px; height: 768px; margin: 0 auto; user-select: none; } .slider_circle_10 > *{ transition: ease all 1s; } .slider_circle_10 > div, .slider_circle_10 .hidden{ opacity: 0; position: absolute; top: 20%; left: 50%; width: 1px; height: 1px; z-index: 0; overflow: hidden; } .slider_circle_10 .active{ opacity: 1; position: absolute; top: 30%; left: 50%; margin-left: -400px; width: 800px; height: 500px; z-index: 10; } .slider_circle_10 .prev1, .slider_circle_10 .next1{ opacity: 0.9; position: absolute; top: 60%; left: 50%; margin-left: -540px; width: 320px; height: 200px; z-index: 9; } .slider_circle_10 .next1{ margin-left: 220px; } .slider_circle_10 .prev2, .slider_circle_10 .next2{ opacity: 0.7; position: absolute; top: 50%; left: 50%; margin-left: -640px; width: 156px; height: 97px; z-index: 8; } .slider_circle_10 .next2 { margin-left: 484px; } .slider_circle_10 .prev3, .slider_circle_10 .next3 { opacity: 0.5; position: absolute; top: 35%; left: 50%; margin-left: -608px; width: 112px; height: 70px; z-index: 7; } .slider_circle_10 .next3 { margin-left: 496px; } .slider_circle_10 .prev4, .slider_circle_10 .next4 { opacity: 0.3; position: absolute; top: 25%; left: 50%; margin-left: -400px; width: 80px; height: 50px; z-index: 6; } .slider_circle_10 .next4 { margin-left: 320px; } .slider_circle_10 .prev5, .slider_circle_10 .next5 { opacity: 0.1; position: absolute; top: 20%; left: 50%; margin-left: -200px; width: 48px; height: 30px; z-index: 5; } .slider_circle_10 .next5 { margin-left: 152px; } /*********************************/ .slider_four_in_line { width: 1280px; height: 250px; position: relative; margin: 0 auto; user-select: none; } .slider_four_in_line > * { transition: ease all 1s; } .slider_four_in_line .hidden { opacity: 0; z-index: 0; top: 0px; left: 50%; } .slider_four_in_line .active, .slider_four_in_line .next1, .slider_four_in_line .next2, .slider_four_in_line .next3, .slider_four_in_line .next4, .slider_four_in_line .prev1 { position: absolute; width: 24%; height: 100%; top: 0px; left: 25%; z-index: 10; margin: 0 0.5%; } .slider_four_in_line .next1 { left: 50%; } .slider_four_in_line .next2 { left: 75%; } .slider_four_in_line .next3 { width: 0%; left: 100%; z-index: 0; opacity: 0; } .slider_four_in_line .next4 { left: 100%; width: 0%; z-index: 0; opacity: 0; } .slider_four_in_line .prev1 { position: absolute; width: 24%; height: 100%; top: 0px; left: 0%; z-index: 10; opacity: 1; } .slider_four_in_line .prev2, .slider_four_in_line .prev3, .slider_four_in_line .prev4 { position: absolute; width: 0%; height: 100%; top: 0px; left: 0%; z-index: 0; opacity: 0; } /*********************************/ .slider_clock { width: 600px; height: 600px; position: relative; margin: 0 auto; user-select: none; } .slider_clock > *{ transition: ease all 1s; } .slider_clock .active { position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -125px; width: 400px; height: 250px; transform: rotate(0deg); opacity: 1; z-index: 10; overflow: hidden; } .slider_clock .next1, .slider_clock .next2, .slider_clock .next3, .slider_clock .next4, .slider_clock .next5, .slider_clock .next6, .slider_clock .next7, .slider_clock .prev1, .slider_clock .prev2, .slider_clock .prev3, .slider_clock .prev4, .slider_clock .prev5, .slider_clock .prev6, .slider_clock .prev7, .slider_clock .hidden { position: absolute; left: 50%; top: 50%; width: 96px; height: 60px; margin-top: 200px; margin-left: -48px; transform-origin: 48px -200px; transform: rotate(0deg); opacity: 1; overflow: hidden; } .slider_clock .next2 { transform: rotate(-30deg); } .slider_clock .next3 { transform: rotate(-60deg); } .slider_clock .next4 { transform: rotate(-90deg); } .slider_clock .next5 { transform: rotate(-120deg); } .slider_clock .next6 { transform: rotate(-150deg); } .slider_clock .next7 { opacity: 0; transform: rotate(-180deg); } .slider_clock .prev1 { transform: rotate(30deg); } .slider_clock .prev2 { transform: rotate(60deg); } .slider_clock .prev3 { transform: rotate(90deg); } .slider_clock .prev4 { transform: rotate(120deg); } .slider_clock .prev5 { transform: rotate(150deg); } .slider_clock .prev6 { transform: rotate(180deg); } .slider_clock .prev7 { opacity: 0; transform: rotate(210deg); } .slider_clock .hidden { opacity: 0; transform: rotate(180deg); } /*********************************/ .nav_indicators { position: absolute; bottom: 0px; left: 0px; width: 100%; text-align: center; z-index: 50000; } .nav_indicators ul { display: inline-block; margin: 0 auto; padding: 0; } .nav_indicators ul li { display: inline-block; width: 20px; height: 20px; margin: 10px; padding: 0; overflow: hidden; background: #fff; color: #fff; border: 2px solid #000; border-radius: 50%; cursor: pointer; } .nav_indicators ul li.active { position: relative; display: inline-block; width: 20px; height: 20px; margin: 10px; padding: 0; background: #555; color: #555; border: 2px solid #aaa; border-radius: 50%; cursor: pointer; } .next_button, .prev_button { position: absolute; left: 100% !important; top: 50% !important; margin: -15px 0 0 -25px !important; width: 50px !important; height: 30px !important; border: 1px solid #000 !important; background: #fff !important;; opacity: 0.8 !important; z-index: 5000 !important; cursor: pointer; text-align: center; line-height: 30px; } .prev_button { position: absolute; left: 0% !important; } .next_button:hover, .prev_button:hover { opacity: 1 !important; } div.slider > div:not(.nav_indicators):not(.next_button):not(.prev_button) { box-shadow: 0px 1px 3px #000; border: 1px solid #000; background: #fff; text-align: center; box-sizing: border-box; font-size: 150px; }