圆滑的传送带无法正确居中

问题描述

我在中心模式下使用光滑的滑块。 中心的元素为“展开”。 加载页面后，各项将正确对齐，但是如果我尝试单击另一张幻灯片，它不会居中对齐，因此需要再次单击。仅在再次单击后，它才能正确定位... 可能是什么问题？

HTML：

<div class="wrapper">
  <div class="carousel">
    <div class="carousel-item">
        <div class="small">
            <img src="images/projects/project1-small.png"><h4 class="project-title">Project name1</h4>
        </div>
        <div class="expanded">
            <img src="images/projects/project1-big.png" alt="" srcset=""><h4 class="project-title">Project name2</h4>
        </div>
    </div>
    <div class="carousel-item">
        <div class="small">
            <img src="images/projects/project1-small.png"><h4 class="project-title">Project name1</h4>
        </div>
        <div class="expanded">
            <img src="images/projects/project1-big.png" alt="" srcset=""><h4 class="project-title">Project name2</h4>
        </div>
    </div>
    <div class="carousel-item">
        <div class="small">
            <img src="images/projects/project1-small.png"><h4 class="project-title">Project name1</h4>
        </div>
        <div class="expanded">
            <img src="images/projects/project1-big.png" alt="" srcset=""><h4 class="project-title">Project name2</h4>
        </div>
    </div>
    
  </div>   
</div>

JS：

$(function(){

    $('.carousel').slick({
arrows:false,slidesToShow: 3,dots:false,centerMode: true,variableWidth: true,focusOnSelect: true,useCSS:true,infinite:true
});

$('.slick-slider').on('click','.slick-slide',function (e) {
e.stopPropagation();
var index = $(this).data("slick-index");
if ($('.slick-slider').slick('slickCurrentSlide') !== index) {
  $('.slick-slider').slick('slickGoTo',index);
}

});
});

CSS：

.wrapper{
    width:100%;
    padding-top: 5rem;
    text-align:center;
  }

  .carousel{
    width:100%;
    margin:0px auto;
  }
  .slick-slide{
      position: relative; 
    width: 300px;
    height: 350px;
    margin: 0 50px;
    Box-shadow: rgba(0,0.05) 0px 16px 16px -20px,rgba(0,0.05) 4px 32px 64px -50px,0.2) 8px 60px 50px -20px; 
    white-space: normal;
    text-shadow: rgba(255,255,0.75) 1px 1px 0px;
    z-index: 2;
    cursor: pointer;
    border-radius: 1rem;
    overflow: hidden;
    background-color: rgb(255,255);
    outline: none;
    .expanded{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }

    .project-title{
        position: absolute;
        top: 20%;
        width: 100%;
        text-align: center;
        font-size: 2rem;
        // display: none; 
    }
  }

  .slick-list{
      margin: 0 -50px;
  }

  .slick-slide img{
    width:100%;
    opacity: 0.25;
  }

  .slick-center{
      width: 600px;
      height: 450px !important;
    padding: 25px;
      background-color: transparent;
      Box-shadow: none;
      transition: width 1s;
      transition-delay: 0.3s;

      .small{
      opacity: 0;
      }
      .expanded{
        display: block;
    }

      img{
        opacity: 1;
      }
  }

我还尝试编辑此默认的slick.js条件，该条件对其他人有帮助，但它无能为力：

if (_.slideCount < _.options.slidesToShow) {
    _.slideOffset -= _.slideWidth * (_.options.slidesToShow - _.slideCount); 
    // _.slideOffset += .slideWidth * Math.floor((.options.slidesToShow + 1) / 2) - _.slideWidth;
    verticalOffset = 0;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）