Блог

Главная - Вопросы по программированию - CSS carousel снова и снова показывает только последнее изображение

CSS carousel снова и снова показывает только последнее изображение

#html #css #carousel #card

#HTML #css #карусель #карточка

Вопрос:

Я пытаюсь реализовать эту карусель в своем проекте. Когда я помещаю свой HTML в codepen, он работает нормально, но когда я добавляю css в свой проект, он будет показывать только 5-ю карточку при повторении. Я думаю, что он помещает все карты друг на друга и объединяет их все сразу с картой 5 сверху.

Я немного изменил css для card carousel, но ничего, что могло бы его нарушить. Это мои стили карт, которые вызывают проблему? Что-то еще?

Спасибо за любую помощь, которую вы можете предоставить!

HTML:

 <div class="card-ctn">
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=1Kw1elu9QjACamp;printsec=frontcoveramp;img=1amp;zoom=1amp;edge=curlamp;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=g0OZtYOW1v8Camp;printsec=frontcoveramp;img=1amp;zoom=1amp;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=FKzLugEACAAJamp;printsec=frontcoveramp;img=1amp;zoom=1amp;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=zV4PuFn5gvoCamp;printsec=frontcoveramp;img=1amp;zoom=1amp;edge=curlamp;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=XfFvDwAAQBAJamp;printsec=frontcoveramp;img=1amp;zoom=1amp;edge=curlamp;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;
}

Ответ №1:

Это работает для меня!

 html, body {
  margin: 0;
  padding: 0;
}

.pic-ctn {
  width: 100vw;
  height: 200px;
}

@keyframes display {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  10% {
    transform: translateX(0);
    opacity: 1;
  }
  20% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: translateX(-200px);
    opacity: 0;
  }
}

.pic-ctn {
  position: relative;
  width: 100vw;
  height: 300px;
  margin-top: 15vh;
}

.pic-ctn > .card {
  position: absolute;
  top: 0;
  left: calc(50% - 100px);
  opacity: 0;
  animation: display 10s 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;
}
.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;
} 
 <div class="pic-ctn">
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=1Kw1elu9QjACamp;printsec=frontcoveramp;img=1amp;zoom=1amp;edge=curlamp;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=g0OZtYOW1v8Camp;printsec=frontcoveramp;img=1amp;zoom=1amp;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=FKzLugEACAAJamp;printsec=frontcoveramp;img=1amp;zoom=1amp;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=zV4PuFn5gvoCamp;printsec=frontcoveramp;img=1amp;zoom=1amp;edge=curlamp;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=XfFvDwAAQBAJamp;printsec=frontcoveramp;img=1amp;zoom=1amp;edge=curlamp;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>

Комментарии:

1. Незначительные, не связанные с UX отзывы: при наведении курсора мыши на карточки отключите анимацию скольжения.