[div=b-carousel steam-theme to-process data-dynamic=tabs] [div=b-carousel__slides] [div=b-carousel__slide data-tab] [div=b-video_poster][poster]https://img.youtube.com/vi/nbKNT8zgbBk/maxresdefault.jpg[/poster] https://www.youtube.com/watch?v=nbKNT8zgbBk[/div] [/div] [div=b-carousel__slide hidden data-tab] [poster]https://i.imgur.com/5zg2abX.png[/poster] [/div] [div=b-carousel__slide hidden data-tab] [poster]https://i.imgur.com/lcU8FxH.png[/poster] [/div] [/div][div=b-carousel__buttons] [div=active data-tab-switch][/div] [div data-tab-switch][/div] [div data-tab-switch][/div] [/div] [/div]
.b-video_poster { clear: both; width: 640px; max-width: 100%; position: relative; cursor: zoom-in; } .b-video_poster br { display: none; } .b-video_poster .b-poster { display: block; border-radius: 3px; transition: .5s ease; } .b-video_poster:hover .b-poster { opacity: .85; } .b-video_poster::before, .b-video_poster > .b-video, .b-video_poster > .b-video a.video-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .b-video_poster > .b-video a.video-link { opacity: 0; } .b-video_poster::before { content: ''; background: url(/assets/blocks/b-video/play-optimized.png) center/80px no-repeat; } /** * Карусель (без анимации переключения) * */ .b-carousel { clear: none; position: relative; } .b-carousel__slide > .b-poster { display: block; } .b-carousel__buttons { display: flex; justify-content: center; align-items: flex-end; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } /* Оформление переключателей */ .b-carousel__buttons > div { width: 13px; height: 13px; margin: 10px 5px; background: rgba(0, 0, 0, 0.1); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; pointer-events: auto; } .b-carousel__buttons > div.active { background: #fff; } /* Основные правила для работы псевдопереключателей */ .b-carousel__buttons > div:first-child:last-child { display: none; } .b-carousel__buttons > div::before, .b-carousel__buttons > div.active + div::after, .b-carousel__buttons > div:first-child::after { z-index: 1; } .b-carousel__buttons > div.active::before, .b-carousel__buttons > div.active ~ div::before, .b-carousel__buttons > div.active:first-child::after { z-index: 0; } /* Оформление псевдопереключателей (боковые полосы) */ .b-carousel__buttons::before, .b-carousel__buttons::after { content: ''; position: absolute; top: 0; bottom: 0; width: 10%; min-width: 64px; background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 100%); opacity: 0; transition: .24s ease; } .b-carousel__buttons > div::before, .b-carousel__buttons > div::after { content: ''; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 0; width: 10%; min-width: 64px; margin: auto; color: #fff; font-family: 'shikimori'; font-size: 32px; text-align: center; text-indent: 10px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; opacity: 0; transition: .24s ease; } .b-carousel__buttons::before, .b-carousel__buttons > div::before { left: 0; transform: scale(-1, 1); } .b-carousel__buttons::after, .b-carousel__buttons > div::after { right: 0; } .b-carousel:hover .b-carousel__buttons::before, .b-carousel:hover .b-carousel__buttons::after, .b-carousel:hover .b-carousel__buttons > div::before, .b-carousel:hover .b-carousel__buttons > div::after { opacity: .7; } .b-carousel .b-video_poster { width: 100%; clear: none; } .b-carousel.steam-theme { clear: none; margin: 0 45px; } .b-carousel.steam-theme .b-carousel__slides { min-height: 108px; } .b-carousel.steam-theme .b-carousel__buttons { position: static; } .b-carousel.steam-theme [data-tab-switch] { margin: 12px 2px; width: 15px; height: 9px; background-color: rgba(255, 255, 255, 0.2); border: 0; border-radius: 2px; box-shadow: none; transition: background-color 0.2s; } .b-carousel.steam-theme [data-tab-switch].active { background-color: rgba(255, 255, 255, 0.6); } .b-carousel.steam-theme .b-carousel__buttons::before, .b-carousel.steam-theme .b-carousel__buttons::after { content: ''; width: 23px; height: 36px; padding: 36px 11px; margin: auto; min-width: 0; color: #fff; background-color: #174057; font-family: 'shikimori'; font-size: 32px; text-align: center; line-height: 1.2; transform: translateY(-16px) translateX(45px); opacity: 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .b-carousel.steam-theme .b-carousel__buttons > div::before, .b-carousel.steam-theme .b-carousel__buttons > div::after { content: ''; background: transparent; } .b-carousel.steam-theme .b-carousel__buttons::before { transform: translateY(-16px) translateX(-45px) scale(-1, 1); } .b-carousel.steam-theme .b-carousel__buttons > div::before, .b-carousel.steam-theme .b-carousel__buttons > div::after { width: 45px; min-width: 0; margin-right: -45px; } .b-carousel.steam-theme .b-carousel__buttons > div::before { margin-left: -45px; }
@BackToReality, если будут какие-то предложения – пиши. Сделал что смог:@BackToReality