Question

光滑传送带内的图像填充不起作用。这是小提琴： 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行。请检查小提琴。

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;}

Answer 2

尝试使用，

box-sizing: border-box;

所有图片

Answer 3

这是工作演示。我已经为光滑幻灯片课增加了余量。

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

https://jsfiddle.net/wzf6kaxr/14/

光滑的轮播图像填充不起作用

3 个答案: