Question

我正在使用slick-slider 在我使用jQuery的Angular-6项目中。我要在单击幻灯片时更改幻灯片的宽度。

这是我的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>

这是我的打字稿代码：

ngAfterViewInit() {
    $('.slide-container').slick({
      centerMode: true,
      centerPadding: '25%',
      slidesToShow: 1,
      accessibility: true,
      cssEase: 'ease-in-out',
      focusOnSelect: true,
      infinite: false,
      speed: 350,
    });
  }
  
  changeWidth() {
     // currentWidth is a global variable assigned to '25%'
     if (currentWidth === '25%') {
      $('.slide-container').slick('slickSetOption', 'centerPadding', '2%');
    } else {
      $('.slide-container').slick('slickSetOption', 'centerPadding', '25%');
    }
  }

这是我的CSS：

.slide {
  transition: width 0.35s ease-in-out;
}

它工作得很好，但是问题是当它增加宽度时，幻灯片先向左移动，然后开始其CSS过渡。另外，当它减小宽度时，它会向右滑动，然后开始CSS过渡。

在增加宽度时，我希望它从幻灯片的中心开始增加宽度，而在减小宽度时，它应该最终仅在幻灯片的中心减少。

更改Slick类的CSS属性也是可以的。我尝试根据需要进行更改，但未达到我的期望。

如何完成此方案？

谢谢。

在Slick-Slider中更改幻灯片的宽度

0 个答案: