我正在尝试在我的项目中实现这个轮播。当我将我的 HTML 放入 codepen 时，它可以正常工作，但是当我将 css 放入我的项目中时，它只会重复显示第五张卡片。我认为它是将所有卡片放在一起，然后将它们全部循环一次，卡片 5 在上面。
我已经更改了卡片轮播的一些 CSS，但没有什么应该破坏它。是我的卡片样式导致了问题吗？还有什么？
感谢您提供任何帮助！
HTML：
<div class="card-ctn">
<div class="card" >
<img src= "http://books.google.com/books/content?id=1Kw1elu9QjAC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
<div class="descriptions">
<h5 class="title">Paint It Black</h5>
<p class="card-text">Janet Fitch</p>
<p class="desc">
"some text"
</p>
<div class="hide">075956812X</div>
<button (click)="addToCart($event)" class="btn cart">Cart</button>
<button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
</div>
</div>
<div class="card" >
<img src= "http://books.google.com/books/content?id=g0OZtYOW1v8C&printsec=frontcover&img=1&zoom=1&source=gbs_api " >
<div class="descriptions">
<h5 class="title"> A Storm of Swords Complete Edition (Two in One) (A Song of Ice and Fire, Book 3)</h5>
<p class="card-text">George R. R. Martin</p>
<p class="desc">
some text
</p>
<div class="hide">9780007426232</div>
<button (click)="addToCart($event)" class="btn cart">Cart</button>
<button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
</div>
</div>
<div class="card" >
<img src= "http://books.google.com/books/content?id=FKzLugEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api" >
<div class="descriptions">
<h5 class="title"> 1066</h5>
<p class="card-text">David Armine Howarth</p>
<p class="desc">
some text
</p>
<div class="hide">0140058508</div>
<button (click)="addToCart($event)" class="btn cart">Cart</button>
<button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
</div>
</div>
<div class="card" >
<img src= "http://books.google.com/books/content?id=zV4PuFn5gvoC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
<div class="descriptions">
<h5 class="title">Sex at Dawn</h5>
<p class="card-text">Christopher Ryan,Cacilda Jetha</p>
<p class="desc">
Some Text
</p>
<div class="hide">075956812X</div>
<button (click)="addToCart($event)" class="btn cart">Cart</button>
<button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
</div>
</div>
<div class="card" >
<img src= "http://books.google.com/books/content?id=XfFvDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
<div class="descriptions">
<h5 class="title">Atomic Habits</h5>
<p class="card-text">James Clear</p>
<p class="desc">
Some Text
</p>
<div class="hide">9780735211292</div>
<button (click)="addToCart($event)" class="btn cart">Cart</button>
<button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
</div>
</div>
</div>
CSS（我改变了一点）
/* *************************
Card Carousel
**************************** */
@keyframes display {
0% {
transform: translateX(300px);
opacity: 0;
}
20% {
transform: translateX(0);
opacity: 1;
}
80% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-300px);
opacity: 0;
}
}
.card-ctn {
position: relative;
height: 400px;
margin-bottom: -30px;
overflow: hidden;
margin-top: -30px;
}
.card-ctn > .card {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
opacity: 0;
animation: display 8s infinite;
}
.card:nth-child(2) {
animation-delay: 2s;
}
.card:nth-child(3) {
animation-delay: 4s;
}
.card:nth-child(4) {
animation-delay: 6s;
}
.card:nth-child(5) {
animation-delay: 8s;
}
/* *************************
End Card Carousel
**************************** */
/* *************************
Card Styles
**************************** */
.card {
flex: 1;
flex-basis: 300px;
flex-grow: 0;
height: 300px;
width: 200px;
background: #fff;
border: 2px solid #fff;
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.5);
transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
overflow: hidden;
position: relative;
margin-top: 38px;
margin-left: 20px;
}
.card img {
width: 100%;
height: 100%;
transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
}
.descriptions {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transition: all 0.7s ease-in-out;
padding: 20px;
box-sizing: border-box;
clip-path: circle(0% at 100% 100%);
}
.card:hover .descriptions {
left: 0px;
transition: all 0.7s ease-in-out;
clip-path: circle(75%);
}
.card:hover {
transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
transform: scale(0.97);
}
.card:hover img {
transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
transform: scale(1.6) rotate(20deg);
filter: blur(3px);
}
.card h5 {
color: white;
text-shadow: 0 0 5px black;
letter-spacing: 1px;
margin: 0px;
margin-top: -20px;
height: 45px;
overflow: hidden;
}
.card p {
color: white;
text-shadow: 0 0 5px black;
line-height: 24px;
font-size: 15px;
}
.card-text {
height: 47px;
}
.card:hover .desc {
background: rgba(54, 54, 54, 0.356);
border-radius: 10px 0 0 10px;
}
.desc {
height: 100px;
height: 147px;
width: 100%;
overflow-y: scroll;
padding-right: 40px;
margin-bottom: 20px;
margin-top: -12px;
box-sizing: content-box;
mix-blend-mode: difference;
}
.card button {
position: absolute;
bottom: 15px;
width: 70px;
height: 30px;
cursor: pointer;
border-style: none;
background-color: #04a304;
color: #fff;
font-size: 13px;
outline: none;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease-in-out;
}
.wish {
right: 10px;
}
.cart {
left: 10px;
}
.card button:hover {
transform: scale(0.95) translateX(-5px);
transition: all 0.5s ease-in-out;
}
.hide {
opacity: 0;
}