Изменение ширины слайда в Slick-Slider

Я использую slick-slider в моем проекте Angular-6, используя jQuery. Я хочу изменить ширину слайда при щелчке этого слайда.

Вот мой HTML:

<div class="slide-container">
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
</div>

Вот мой код машинописного текста:

<div class="slide-container">
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
</div>

Вот мой CSS:

<div class="slide-container">
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
  <div class="slide" (click)="changeWidth()"></div>
</div>

Он работает очень хорошо, но проблема в том, Сначала слайды ширины перемещаются влево, а затем начинают переход к CSS. Кроме того, когда он уменьшает ширину, он перемещает слайды вправо, а затем запускает переход CSS.

Во время увеличения ширины я хочу, чтобы она увеличивала ширину от центра слайда и на время его уменьшения должно уменьшаться только в центре слайда.

Также можно изменить CSS-свойства Slick-классов. Я старался измениться в соответствии с моей потребностью, но это не работает как мое ожидание.

Как я могу выполнить этот сценарий?

Спасибо.

1
задан 13 August 2018 в 15:47

0 ответов

Другие вопросы по тегам:

Похожие вопросы: