我如何将活动图像中心保持在光滑的滑块中？

Question

我有一个带有图像和一些文本的光滑滑块。图像被定位并且第一个图像居中，但接下来的图像则缓慢地向左侧移动。如何使每个活动图像居中对齐？通过这种方式，滑块中必须仅显示两个图像，而对于活动图片。以下是链接：-http://165.22.181.70/test-8/，请查看客户推荐部分。（PS：-轮播中一次只能显示三张图片）。请帮助。

jQuery('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
jQuery('.slider-nav').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

.testimonials .slider-nav .slick-slide {
  width: 150px !important;
  margin: 8px 2.4em;
}

.slider-nav {
  width: 600px;
  margin: 0 auto;
  display: block;
  max-width: 100%;
}

.testimonials .slider-nav .slider-img {
  border-radius: 50%;
  border: 1px solid transparent;
}

.testimonials .slick-prev,
.testimonials .slick-next {
  display: none !important;
}

.testimonials .slick-dots {
  bottom: -219px !important;
}

.testimonials .slider-nav .slick-current .slider-img {
  border: 3px solid #00c590;
  transform: scale(1.1);
}

.testimonials .slider-for {
  text-align: center;
}

.testimonials .slick-dots li {
  width: 20px;
  border: 1px solid transparent;
  border-radius: 50%;
  height: 20px;
}

.testimonials .slick-dots .slick-active {
  width: 20px;
  border: 1px solid #bf9b30;
  border-radius: 50%;
  height: 20px;
}

.testimonials .slide-text p {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
}

.testimonials .slick-dots li button {
  width: 10px;
  background: #d5d5d5 !important;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  top: 4px;
  left: 4px;
}

.testimonials .slick-dots .slick-active button {
  width: 10px;
  background: #bf9b30 !important;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  top: 4px;
  left: 4px;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

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

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

<section class="testimonials" id="testimonials">
  <div class="inner-contianer">
    <div class="slider-nav">
      <div class="slide-image">
        <img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img">
      </div>
      <div class="slide-image">
        <img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img">
      </div>
      <div class="slide-image">
        <img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img">
      </div>
      <div class="slide-image">
        <img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img">
      </div>
      <div class="slide-image">
        <img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img">
      </div>
    </div>
    <div class="slider-for">
      <div class="slide-text">
        <p>“Magellan Consulting Group helped us to realize our potential of production capacity. With the same number of employees, last month we were able to increase production by 14% compared to our previous production record. This performance should
          be our reference moving forward, so we can meet our budget objectives.”</p>
        <h5>Supply Chain Manager</h5>
      </div>
      <div class="slide-text">
        <p>“This performance should be our reference moving forward, so we can meet our budget objectives”</p>
        <h5>Supply Chain Manager</h5>
      </div>
      <div class="slide-text">
        <p>“Magellan Consulting Group helped us to realize our potential of production capacity. With the same number of employees, last month we were able to increase production by 14% compared to our previous production record. This performance should
          be our reference moving forward, so we can meet our budget objectives.”</p>
        <h5>Supply Chain Manager</h5>
      </div>
      <div class="slide-text">
        <p>“With the same number of employees, last month we were able to increase production by 14% compared to our previous production record.”</p>
        <h5>Supply Chain Manager</h5>
      </div>
      <div class="slide-text">
        <p>“With the same number of employees, last month we were able to increase production by 14% compared to our previous production record.”</p>
        <h5>Supply Chain Manager</h5>
      </div>
    </div>
  </div>
</section>

Answer 1

居中模式在奇数时效果很好。与奇数编号的幻灯片一起使用以显示计数。