[div=shikiWrapper] [div=shikiSlider_c] [div=shikiSlider_s] [div=shikiSlider_slide active] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [div=shikiSlider_slide] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [div=shikiSlider_slide] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [div=shikiSlider_slide] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [div=shikiSlider_slide] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [div=shikiSlider_slide] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [div=shikiSlider_slide] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [div=shikiSlider_slide] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [div=shikiSlider_slide] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [div=shikiSlider_slide] [div=shikiSlider_slide_img][/div] [div=shikiCaption]TEXT[/div] [/div] [/div][/div][/div]
.shikiWrapper { position: relative; display: inline-flex; width: calc(100% / 4); margin: -1px auto 2px; border-radius: 0.35rem; padding: 5px; } .shikiWrapper .shikiSlider_c, .shikiWrapper .shikiSlider_slide .shikiSlider_slide_img, .shikiWrapper .shikiSlider_slide .shikiSlider_slide_img1 { padding-bottom: 55%; } .shikiWrapper .shikiSlider_c { position: relative; width: 100%; height: 0; left: 0.2px; overflow: hidden; border-radius: inherit; user-select: none; box-shadow: 0 2px 8px #00000033; } .shikiWrapper .shikiSlider_s { position: absolute; display: inline-flex; left: 0; top: 0; width: 100%; animation: slider 38s ease-in-out infinite; animation-fill-mode: forwards; } @keyframes slider { 5%, 100% { left: 0; } 10%, 15% { left: -100%; } 20%, 25% { left: -200%; } 30%, 35% { left: -300%; } 40%, 45% { left: -400%; } 50%, 55% { left: -500%; } 60%, 65% { left: -600%; } 70%, 75% { left: -700%; } 80%, 85% { left: -800%; } 90%, 95% { left: -900%; } } .shikiWrapper .shikiSlider_slide { position: relative; display: inherit; cursor: pointer; width: inherit; height: inherit; } .shikiWrapper .shikiSlider_slide .shikiSlider_slide_img, .shikiWrapper .shikiSlider_slide .shikiSlider_slide_img1 { width: 100vw; } .shikiWrapper .shikiSlider_slide .shikiCaption { position: absolute; display: flex; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: flex-end; line-height: 2; font-size: 1.35em; color: #f0f8ff; z-index: 12; font-weight: bold; pointer-events: none; text-shadow: 1px 0 2px #000000bf, -1px 0 2px #000000bf, 0 1px 2px #000000bf, 0 -1px 2px #000000bf, 1px 0 2px #000000bf, -1px 0 2px #000000bf, 0 1px 2px #000000bf, 0 -1px 2px #000000bf; } .shikiWrapper .shikiSlider_slide:after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 65px rgba(0, 0, 0, 0.5) inset; } .shikiWrapper .shikiSlider_s:hover, .shikiWrapper .shikiSlider_slide:hover { animation-play-state: paused !important; } .shikiWrapper .shikiSlider_slide:nth-of-type(1) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; } .shikiWrapper .shikiSlider_slide:nth-of-type(2) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; } .shikiWrapper .shikiSlider_slide:nth-of-type(3) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; } .shikiWrapper .shikiSlider_slide:nth-of-type(4) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; } .shikiWrapper .shikiSlider_slide:nth-of-type(5) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; } .shikiWrapper .shikiSlider_slide:nth-of-type(6) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; } .shikiWrapper .shikiSlider_slide:nth-of-type(7) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; } .shikiWrapper .shikiSlider_slide:nth-of-type(8) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; } .shikiWrapper .shikiSlider_slide:nth-of-type(9) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; } .shikiWrapper .shikiSlider_slide:nth-of-type(10) .shikiSlider_slide_img { background: url(https://avatars.mds.yandex.net/i?id=05516047e7a9b0417323e11d391c8ef6ae25fd97-9246003-images-thumbs&n=13) no-repeat center / cover; }
Нет комментариев