css - 光滑的旋转木马图像填充不起作用

Question

光滑轮播内的图像填充不起作用。这是 fiddle : https://jsfiddle.net/wzf6kaxr/3/

<div class="testimonial-shortcode-wrapper carousel">
  <div class="slider-for">
    <div class="testimonial-item"> <i class="ion-quote" style="color:cc9900;"></i><br/> Holatest hola amiogos</div>
    <div class="testimonial-item"> <i class="ion-quote" style="color:cc9900;"></i><br/> Holatest hola amiogos</div>
    <div class="testimonial-item"> <i class="ion-quote" style="color:cc9900;"></i><br/> Holatest hola amiogos</div>
    <div class="testimonial-item"> <i class="ion-quote" style="color:cc9900;"></i><br/> Holatest hola amiogos</div>
    <div class="testimonial-item"> <i class="ion-quote" style="color:cc9900;"></i><br/> Holatest hola amiogos</div>
    <div class="testimonial-item"> <i class="ion-quote" style="color:cc9900;"></i><br/> Holatest hola amiogos</div>
    <div class="testimonial-item"> <i class="ion-quote" style="color:cc9900;"></i><br/> Holatest hola amiogos</div>
    <div class="testimonial-item"> <i class="ion-quote" style="color:cc9900;"></i><br/> Holatest hola amiogos</div>
  </div>

  <div class="testimonial-nav slider-nav">
    <div class="nav-item" style="width: 101px;">
      <img width="120" height="120" src="https://webmose.com/sjbdev/wp-content/uploads/2018/03/Cristiano.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
      <h3 class="testimonial-title">Cristiano Grow</h3>
      <p class="testimonial-position">Partner / Director</p>
    </div>
    <div class="nav-item" style="width: 101px;">
      <img width="120" height="120" src="https://webmose.com/sjbdev/wp-content/uploads/2018/03/Cristiano.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
      <h3 class="testimonial-title">Cristiano Grow</h3>
      <p class="testimonial-position">Partner / Director</p>
    </div>
    <div class="nav-item" style="width: 101px;">
      <img width="120" height="120" src="https://webmose.com/sjbdev/wp-content/uploads/2018/03/Cristiano.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
      <h3 class="testimonial-title">Cristiano Grow</h3>
      <p class="testimonial-position">Partner / Director</p>
    </div>
    <div class="nav-item" style="width: 101px;">
      <img width="120" height="120" src="https://webmose.com/sjbdev/wp-content/uploads/2018/03/Cristiano.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
      <h3 class="testimonial-title">Cristiano Grow</h3>
      <p class="testimonial-position">Partner / Director</p>
    </div>
    <div class="nav-item" style="width: 101px;">
      <img width="120" height="120" src="https://webmose.com/sjbdev/wp-content/uploads/2018/03/Cristiano.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
      <h3 class="testimonial-title">Cristiano Grow</h3>
      <p class="testimonial-position">Partner / Director</p>
    </div>
    <div class="nav-item" style="width: 101px;">
      <img width="120" height="120" src="https://webmose.com/sjbdev/wp-content/uploads/2018/03/Cristiano.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
      <h3 class="testimonial-title">Cristiano Grow</h3>
      <p class="testimonial-position">Partner / Director</p>
    </div>
    <div class="nav-item" style="width: 101px;">
      <img width="120" height="120" src="https://webmose.com/sjbdev/wp-content/uploads/2018/03/Cristiano.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
      <h3 class="testimonial-title">Cristiano Grow</h3>
      <p class="testimonial-position">Partner / Director</p>
    </div>
  </div>

</div>

CSS:不包括此处……将近 500 行。请检查 fiddle 。

js:

    jQuery(document).ready(function($) {
  $('.testimonial-shortcode-wrapper').each(function() {
    var $this = $(this);
    //var autoplay = $(this).attr('data-autoplay') == 'true' ? true : false;
    //var slide_duration = parseInt($(this).attr('data-slide-duration'));

    if ($this.hasClass('carousel')) {
      $this.find('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        fade: false,
        autoplay: true,
        autoplaySpeed: 6000,
        asNavFor: $('.slider-nav', $this)
      });
      $this.find('.slider-nav').slick({
        slidesToShow: 5,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: $('.slider-for', $this),
        dots: false,
        centerMode: true,
        variableWidth: true,
        variableHeight: true,
        centerPadding: '0px',
        focusOnSelect: true,
        responsive: [{
            breakpoint: 991,
            settings: {
              slidesToShow: 3
            }
          },
          {
            breakpoint: 767,
            settings: {
              slidesToShow: 3
            }
          }
        ]
      });
    }
  });
});

图像在不遵守填充的情况下相互重叠。 我找不到问题出在哪里，这就是为什么我要寻求您的帮助。 What I'm trying to achieve.

Answer 1

尝试为图像的外部 div 提供填充，而不是为图像本身提供填充。

  .slick-slide{ padding:100px;}