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

Posted 2023-05-08

【中文标题】如何将活动图像中心保持在光滑滑块中？

【英文标题】：how do i keep the active image center in the slick slider?

【发布时间】：2020-06-15 20:04:30

【问题描述】：

我有一个带有图像和一些文字的光滑滑块。图像已定位，第一个图像居中，但下一个图像缓慢向左侧移动。我如何使每个活动图像居中对齐？顺便说一下，滑块中必须只显示两个图像，一个文本用于活动图像。这是链接：-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>

【问题讨论】：

这能回答你的问题吗？ Center active slide with showing 3 slides in slick.js

不。因为每当我滑动下一个活动图像时，它会略微向左显示。这就是问题发生的地方。我希望图像居中对齐

【参考方案1】：

中心模式适用于奇数。与奇数的 slideToShow 计数一起使用。

【讨论】：

我做了，但是段落和滑块导航之间有一个间隙。它停留在一个位置。但是当滑块的宽度为 600px 时它不会发生（停留在中间） -导航。