Я использую 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-классов. Я старался измениться в соответствии с моей потребностью, но это не работает как мое ожидание.
Как я могу выполнить этот сценарий?
Спасибо.