Скользящие изображения с анимацией в ngx-bootstrap для angular 5

Я использую карусель ngx-bootstrap для перемещения изображений на главной странице. Как я могу перемещать изображения с анимацией?


ngx-bootstrap angular5
person Hossein Bajan    schedule 02.01.2018    source источник
comment
Пожалуйста, представьте, если вы знаете другой пакет.   -  person Hossein Bajan    schedule 02.01.2018
comment
Теперь в ngx-bootstrap нет поддержки анимации.   -  person IlyaSurmay    schedule 02.01.2018
comment
github.com/sheikalthaf/ngx-carousel — у этого есть поддержка анимации, но у меня нет работал с ним, поэтому ничего не могу сказать о его плюсах и минусах   -  person IlyaSurmay    schedule 02.01.2018

Ответы (3)


arrow_upward
3
arrow_downward

https://github.com/valor-software/ngx-bootstrap/issues/ 281

в компоненте CSS я добавил

.animated {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

в html я добавил

<carousel>
  <slide class="animated fadeIn">
    <img src="xxx.xx" class="carousel-img">
  </slide>
</carousel>
person edrich13    schedule 23.04.2019

arrow_upward
4
arrow_downward

Для создания скользящей анимации я придумал следующее решение

в основном styles.scss добавить

carousel.slide-animated {
  slide.item {
    animation-duration: 1s;
    animation-fill-mode: both;
    &.active {
      width: 100%;
      animation-name: carouselSlideIn;
    }
    &:not(.active) {
      display: table-cell;
      animation-name: carouselSlideOut;
    }
  }
}

@keyframes carouselSlideIn {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes carouselSlideOut {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

Вы можете использовать его, чем в компоненте, например:

<carousel class="slide-animated">
  <slide><img src="slide1.jpg"/></slide>
  <slide><img src="slide2.jpg"/></slide>
  <slide><img src="slide3.jpg"/></slide>
</carousel>

PS: Единственная оставшаяся проблема заключается в том, что слайды всегда перемещаются справа налево, независимо от того, какую стрелку вы нажали. Я обновлю ответ, когда/если решу это

person grigson    schedule 04.08.2019

arrow_upward
0
arrow_downward

Григсон, я нашел решение твоей проблемы

вне моего элемента карусели я создал два разных div, которые вызывают метод, когда вы наводите курсор мыши, а затем

этот метод меняет состояние двух переменных (на true и false)

и мой компонент карусели имеет 2 привязки класса, один для следующего, а другой для предыдущего

поэтому мой html выглядит так

<div class="list" style="margin: auto;max-width: 1500px;">
<div class="prev" (mouseenter)="onPrev()" >

</div>
<div class="next" (mouseenter)="onNext()" >

</div>
<carousel
[class.slide-animated-next]="next"
[class.slide-animated-prev]="prev"
[showIndicators]="false"
[itemsPerSlide]="6"
[noWrap]="false"
[interval]="50000"
style="display: flex; justify-content: center;">

<slide *ngFor="let product of list" style="margin: 1rem">
  <app-card-no-brand-partial [imgProduto]="product.img" 
    [nomeProduto]="product.nome" [precoProduto]="product.preco">
  </app-card-no-brand-partial>
</slide>

мой css

carousel.slide-animated-next
 slide.item
   animation-duration: 0.5s
   animation-fill-mode: both
  &.active
   animation-name: carouselSlideIn

carousel.slide-animated-prev
 slide.item
   animation-duration: 0.5s
   animation-fill-mode: both
  &.active
   animation-name: carouselSlideOut



  @keyframes carouselSlideIn
   0%
     transform: translateX(-600%)
   100%
     transform: translateX(0)


  @keyframes carouselSlideOut
   0%
    transform: translateX(600%)
   100%
    transform: translateX(0%)

  .prev
   z-index: 20000
   position: absolute
   width: 50%
   height: 400px
   margin-left: -5%



  .next
   z-index: 20000
   position: absolute
   width: 50%
   height: 400px

   margin-left: 50%

и, наконец, мой машинописный текст имеет это;

  prev: boolean;
  next: boolean;

  onNext() {
   this.next = true;
   this.prev = false;
  }
  onPrev() {
   this.prev = true;
   this.next = false;
  }

и в ваших стилях.css вам нужно

.carousel-control-prev,
.carousel-control-next
 z-index: 20000

чтобы установить контроль над теми div, на которые вы наводите курсор мыши

:3

person SIravor    schedule 06.03.2020