<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css"> <style> .card-wrap {
width: 100%; margin: auto; overflow-x: hidden; /*display: flex; align-items: center; overflow-x: scroll; padding-top: $padding; padding-bottom: $padding;*/
} .card-wrap:focus, .card-wrap:active {
outline: 0;
}
.flickity-viewport {
height: 340px;
}
.card {
width: 100%; max-width: 190px; min-width: 190px; border-radius: 0.6rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.04); position: relative; min-height: 240px; background-size: cover; background-repeat: no-repeat; background-position: center center; margin: 1rem;
} .card__overlay {
border-radius: 0.6rem; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.12); background: linear-gradient(to top, rgba(0, 0, 0, 25%), rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3)); opacity: 0.7; transition: all 350ms ease-out 0s;
} .card__info {
padding: 3rem 1.5rem; width: 100%; text-align: center; color: white; position: absolute; bottom: 0; text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
} .card__title {
font-size: 1.8rem; font-weight: 800; margin-bottom: 0.5rem;
}
a.card {
transition: all 350ms ease-out 0s; overflow: hidden;
} a.card:hover, a.card:focus {
transform: scale(1.1) translateY(8px); transition: all 350ms ease;
} a.card:hover .card__overlay, a.card:focus .card__overlay {
opacity: 1; top: -150px;
} a.card:hover {
cursor: -webkit-grab;
} a.card:focus, a.card:active {
cursor: -webkit-grabbing;
} } </style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flickity/2.1.1/flickity.pkgd.js'></script> <script>console.clear();
// 初始化Flickity实例 const flkty = new Flickity('.card-wrap', {
contain: true, prevNextButtons: false, pageDots: false, wrapAround: true, adaptiveHeight: true, setGallerySize: false, selectedAttraction: 0.05, freeScrollFriction: 0.1, autoPlay: 3000, pauseAutoPlayOnHover: true });
// 自动播放状态控制
let isAutoPlayActive = true;
const carousel = document.querySelector('.card-wrap');
// 修复手动拖动后自动播放停止的问题 flkty.on('dragEnd', () => {
if (isAutoPlayActive && !flkty.isPlaying) {
flkty.playPlayer();
}
});
// 增强悬停控制 carousel.addEventListener('mouseenter', () => {
if (flkty.isPlaying) {
flkty.stopPlayer();
isAutoPlayActive = false;
}
});
carousel.addEventListener('mouseleave', () => {
if (!isAutoPlayActive) {
flkty.playPlayer();
isAutoPlayActive = true;
}
});
// 窗口失焦时暂停自动播放 window.addEventListener('blur', () => {
if (flkty.isPlaying) {
flkty.stopPlayer();
}
});
window.addEventListener('focus', () => {
if (!flkty.isPlaying && isAutoPlayActive) {
flkty.playPlayer();
}
});</script>