先上效果图：
备注：这个效果图太大了，压缩了一下效果有点不咋好看。感兴趣同学们可以自己运行代码看一下，保证不会失望~
再上代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>:root {--height: calc( 80vh - 50px );--width: 450px;}.carousel {display: grid;transform: translate3d(0,0,0.1px);}.carousel__list {display: flex;overflow: hidden;list-style: none;padding: 2em 0 3em;margin: 0;contain: layout;isolation: isolate;}.carousel__item {display: grid;position: relative;align-content: start;margin: 0 10px;padding: 0;flex: 1 1 10%;height: var(--height);overflow: hidden;background: rgba(255,255,255,0.2);border-radius: 16px;transform: translate3d(0,0,0.1px);box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 15px 2px, rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;contain: layout;isolation: isolate;}.carousel__item,.carousel__item * {transition: all .6s cubic-bezier(.55,.24,.18,1);user-select: none;}.carousel__image,.carousel__contents {width: var(--width);height: auto;}.carousel__item:hover {flex-basis: calc( var(--width) / 2 );transition: all 0.3s ease;}.carousel__item[data-active] {flex-basis: var(--width);flex-grow: 0;}@media screen and (max-width: 800px) {.carousel__item {flex-basis: 15%;}}@media screen and (max-width: 600px) {.carousel__item {flex-basis: 10%;margin: 0 5px;border-radius: 8px;font-size: 3vw;}.carousel__item[data-active] {flex-basis: 45%;flex-grow: 0;}.carousel__item:nth-child(3),.carousel__item:nth-child(7) {flex: 0 0 10px;}.carousel__item:nth-child(2),.carousel__item:nth-child(8) {flex: 0 0 5px;transform: translateX(-50px);}.carousel__item:nth-child(8) {transform: translateX(50px);}.carousel__item:nth-child( 1 ),.carousel__item:nth-child( n + 9 ) {flex: 0 0 0px;margin: 0;box-shadow: none;opacity: 0!important;}.carousel__item:not(:nth-child( n + 5 )) img,.carousel__item:nth-child( n + 7 ) img {opacity: 0.8;}.carousel__item:not(:nth-child( n + 4 )) *,.carousel__item:nth-child( n + 7 ) * {opacity: 0!important;}}@media screen and (min-width: 600px) {.carousel__item:nth-child(3),.carousel__item:nth-child(10) {flex: 0 0 10px;}.carousel__item:nth-child(2),.carousel__item:nth-child(11) {flex: 0 0 5px;transform: translateX(-50px);}.carousel__item:nth-child(11) {transform: translateX(50px);}.carousel__item:nth-child( 1 ),.carousel__item:nth-child( n + 12 ) {flex: 0 0 0px;margin: 0;box-shadow: none;opacity: 0!important;}.carousel__item:not(:nth-child( n + 5 )) img,.carousel__item:nth-child( n + 9 ) img {opacity: 0.8;}.carousel__item:not(:nth-child( n + 4 )) *,.carousel__item:nth-child( n + 10 ) * {opacity: 0!important;}}.carousel__item img {display: block;position: absolute;width: var(--width);height: 100%;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: -1;aspect-ratio: 2/3;object-fit: cover;filter: saturate(0.2) contrast(0.75) brightness(1.1);}.carousel__item::after {content: "";position: absolute;inset: 0;width: 100%;height: 100%;z-index: 1;opacity: 1;background: linear-gradient(160deg, rgba(2,0,36,0) 40%, rgba(118,221,136,.5) 70%, rgba(0,255,246,.6) 100%);transition: all .66s cubic-bezier(.55,.24,.18,1);}.carousel__item[data-active]::after {transform: translateY(100%);}.carousel__item[data-active],.carousel__item[data-active] * {opacity: 1;filter: none;}.carousel__contents {display: flex;flex-direction: column-reverse;justify-content: start;min-height: 200px;padding: 1em;z-index: 2;background-image: radial-gradient( ellipse at 0px 0px, rgba(0,0,0,0.4) 20%, transparent 50% );background-size: 170% 200px;background-repeat: no-repeat;position: absolute;top: 0;left: 0;}.carousel__contents .user__name {color: #e8eff4;font-size: 1.75em;font-weight: 600;letter-spacing: .8px;text-shadow: 0 1px 0 rgba(0,0,0,0.3);}.carousel__contents .user__title {font-family: lexend;font-size: .875em;letter-spacing: 1.25px;font-weight: 500;text-transform: uppercase;color: transparent;background: linear-gradient( 270deg, rgb(67, 255, 0), rgb(0, 255, 247) );background-clip: text;-webkit-background-clip: text;opacity: 0.85;text-wrap: balance;margin-bottom: 0.5em;}.carousel__contents .user__title,.carousel__contents .user__name {margin: 0;line-height: 1.1;opacity: 0;transform: translateX(-200px);transition-duration: 1s;max-width: 18em;}@media screen and (max-width: 800px) {.carousel__item img {width: calc(var(--width) * .5);}.carousel__contents {transform: translateX(-100%) rotate(90deg);transform-origin: bottom right;align-items: end;justify-content: end;background-image: radial-gradient( ellipse at 100% 100%, rgba(0, 0, 0,.4) 0%, transparent 50% );background-position: -100% 100%;flex-direction: column;position: absolute;bottom: 0;left: 0;text-align: right;}[data-active] .carousel__contents {background-position: 100% 100%;}.carousel__contents .user__title,.carousel__contents .user__name {max-width: 70vh;transform: translateX(200px);}}[data-active] .carousel__contents * {transform: translateX(0px);transition-duration: 0.66s;opacity: 1;}[data-active] .carousel__contents .user__name {transition-delay: 0.1s;}[data-active] .carousel__contents .user__title {opacity: 0.85;transition-delay: 0.05s;}/*non-demo css*/.carousel__nav {padding: 1em;justify-self: end;grid-row: 1;display: flex;justify-content: space-between;gap: 1em;}button {display: flex;gap: .5em;padding: 0.5em 1.5em;}button span,button svg {margin: 0;padding: 0;fill: none;}button path {fill: currentColor;}body, html {padding: 0;align-items: start;}</style>
</head>
<body><main id="app"><section class="carousel"><ul class="carousel__list"><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Anthony Lee</h2><h3 class="user__title">Archetypal Professor of Recognition</h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Alicia Chevalier</h2><h3 class="user__title">Corporate Usability Analyst</h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Nate Boucher</h2><h3 class="user__title">Customer Impact Officer</h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1614204424926-196a80bf0be8?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Leah Harris</h2><h3 class="user__title">Designer and Bandit</h3></div></div></li><li class="carousel__item" tabindex="0" data-active="data-active"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1536766768598-e09213fdcf22?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Angelina Laurent</h2><h3 class="user__title">Oracle for Inspiration</h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Gal Gadot</h2><h3 class="user__title">Acting Designer and Consultant</h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1590086782792-42dd2350140d?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Albert Sørensen</h2><h3 class="user__title">Neural Big Shot of Anticipation</h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1553514029-1318c9127859?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Candice Marchand</h2><h3 class="user__title">Mindful Realist of Motion Laws </h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1596813362035-3edcff0c2487?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Jennifer Salazar</h2><h3 class="user__title">Design Habitué</h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Antonin Dufour</h2><h3 class="user__title">Human-Centered Designer</h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1530785602389-07594beb8b73?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Melissa Simon</h2><h3 class="user__title">International Infrastructure Analyst</h3></div></div></li><li class="carousel__item" tabindex="0"><div class="carousel__box"><div class="carousel__image"><img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?fit=crop&h=720&q=80" width="480" height="720"/></div><div class="carousel__contents"><h2 class="user__name">Brandon Murray</h2><h3 class="user__title">Central Functionality VP</h3></div></div></li></ul><div class="carousel__nav"><button class="prev"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M9.586 4l-6.586 6.586a2 2 0 0 0 0 2.828l6.586 6.586a2 2 0 0 0 2.18 .434l.145 -.068a2 2 0 0 0 1.089 -1.78v-2.586h7a2 2 0 0 0 2 -2v-4l-.005 -.15a2 2 0 0 0 -1.995 -1.85l-7 -.001v-2.585a2 2 0 0 0 -3.414 -1.414z"></path></svg><span>prev</span></button><button class="next"><span>next</span><svg width="24" height="24" viewBox="0 0 24 24"><path d="M12.089 3.634a2 2 0 0 0 -1.089 1.78l-.001 2.586h-6.999a2 2 0 0 0 -2 2v4l.005 .15a2 2 0 0 0 1.995 1.85l6.999 -.001l.001 2.587a2 2 0 0 0 3.414 1.414l6.586 -6.586a2 2 0 0 0 0 -2.828l-6.586 -6.586a2 2 0 0 0 -2.18 -.434l-.145 .068z"></path></svg></button></div></section>
</main>
<a class="social-icon codepen" href="https://blog.csdn.net/qq_35241329?type=blog" title="view my codepens"><span>仅用于学习交流</span>
</a>
</body>
<script>const d = document;const $q = d.querySelectorAll.bind(d);const $g = d.querySelector.bind(d);const $prev = $g(".prev");const $next = $g(".next");const $list = $g(".carousel__list");let auto;let pauser;const getActiveIndex = () => {const $active = $g("[data-active]");return getSlideIndex($active);}const getSlideIndex = ($slide) => {return [...$q(".carousel__item")].indexOf( $slide );}const prevSlide = () => {const index = getActiveIndex();const $slides = $q(".carousel__item");const $last = $slides[$slides.length-1];$last.remove();$list.prepend($last);activateSlide( $q(".carousel__item")[index] );}const nextSlide = () => {const index = getActiveIndex();const $slides = $q(".carousel__item");const $first = $slides[0];$first.remove();$list.append($first);activateSlide( $q(".carousel__item")[index] );}const chooseSlide = (e) => {const max = (window.matchMedia("screen and ( max-width: 600px)").matches) ? 5 : 8;const $slide = e.target.closest( ".carousel__item" );const index = getSlideIndex( $slide );if ( index < 3 || index > max ) return;if ( index === max ) nextSlide();if ( index === 3 ) prevSlide();activateSlide($slide);}const activateSlide = ($slide) => {if (!$slide) return;const $slides = $q(".carousel__item");$slides.forEach(el => el.removeAttribute('data-active'));$slide.setAttribute( 'data-active', true );$slide.focus();}const autoSlide = () => {nextSlide();}const pauseAuto = () => {clearInterval( auto );clearTimeout( pauser );}const handleNextClick = (e) => {pauseAuto();nextSlide(e);}const handlePrevClick = (e) => {pauseAuto();prevSlide(e);}const handleSlideClick = (e) => {pauseAuto();chooseSlide(e);}const handleSlideKey = (e) => {switch(e.keyCode) {case 37:case 65:handlePrevClick();break;case 39:case 68:handleNextClick();break;}}const startAuto = () => {auto = setInterval( autoSlide, 3000 );}startAuto();$next.addEventListener( "click", handleNextClick );$prev.addEventListener( "click", handlePrevClick );// $list.addEventListener( "click", handleSlideClick );$list.addEventListener( "focusin", handleSlideClick );$list.addEventListener( "keyup", handleSlideKey );</script>
</html>
