Question

我的WordPress网站中有一个滑动滑块，使用的是滑动滑块上的bg图片。

我需要将它们设置为固定的长宽比，我知道该怎么做，并且通常可以很好地工作，但是事实证明，在光滑的滑块上这很棘手。

当我在幻灯片上添加通常的长宽比“ padding-top”时，它会使幻灯片/图像非常长：您可以在此处看到：https://codepen.io/pixelboutiqueuk-the-lessful/pen/zYrZJgQ?editors=0110

html：

<div class="feature-block" data-aos="fade" style="background-color:<?php echo $bg_color; ?>">
  <ul class="slider fancy-slider" id="feature-block-slider" data-aos="fade">
    <li class="slick-slide" data-aos="fade" style="background-image: url('https://images.unsplash.com/photo-1568819646610-2f8982dd0c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80');"><div class="overlay"></div></li>
        <li class="slick-slide" data-aos="fade" style="background-image: url('https://images.unsplash.com/photo-1586220778893-1fae18067543?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');"><div class="overlay"></div></li>
  </ul>

  <div class="content-wrapper" data-aos="fade">
    <h2 class="title">Static content box</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt vel risus id ornare. Sed at posuere turpis. Sed eu convallis diam. Duis vitae lectus finibus, luctus ante in, elementum mauris. Duis nec diam luctus, tristique tortor vel, pellentesque sapien. Nulla tincidunt tempus felis, vehicula interdum mi eleifend a. Duis non ante porttitor, luctus ligula eu, cursus sapien. Mauris varius lobortis mi sit amet euismod. Integer id leo tempus velit accumsan tempor sed id lectus. Nulla imperdiet iaculis erat nec placerat. Vivamus tincidunt ipsum eu lorem vestibulum, euismod ultricies nunc congue.</p>
  </div>
</div>

CSS：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.feature-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 60px !important;
  padding-right: 60px !important;
}

ul#feature-block-slider {
  margin-right: 47px;
  width: 50%;
}

li.slick-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 56.25%;
}

.slick-arrow {
  font-size: 0;
  position: absolute;
  border: none;
  background-color: transparent;
  top: 0;
  z-index: 1;
}

jQuery：

jQuery(document).ready(function($) {
 $slideshow = $('.slider').slick({
    infinite: true,
    mobileFirst: true,
    vertical: false,
    fade: false,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 2000,
    dots: false,
    arrows: true,
    pauseOnHover: true,
    slidesPerRow: 1,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: false
  });
  
  $('.slider').click(function(e) {
       var pWidth = $(this).innerWidth();
       var pOffset = $(this).offset(); 
       var x = e.pageX - pOffset.left;
 
      if(pWidth/2 > x) {
        $slideshow.slick('slickNext');
      } else if(pWidth/2 < x) {
        $slideshow.slick('slickPrev');
      }
  });
  
    $('.slider').click(function(e) {
       var pWidth = $(this).innerWidth();
       var pOffset = $(this).offset(); 
       var x = e.pageX - pOffset.left;
 
      if(pWidth/2 > x) {
        $slideshow.slick('slickNext');
      } else if(pWidth/2 < x) {
        $slideshow.slick('slickPrev');
      }
  });
  
  $('.slider').on('mousemove', function(e){
       var pWidth = $(this).innerWidth();
       var pOffset = $(this).offset(); 
       var x = e.pageX - pOffset.left;
 
      if(pWidth/2 > x) {
        $('.slick-slide').css('cursor','url(https://i.ibb.co/qR2mDmM/slider-arrow-left.png), pointer');
      } else if(pWidth/2 < x) {
        $('.slick-slide').css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), pointer');
      }
  });
});

当我向滑块本身添加padding-top时，这看起来像是正确的尺寸，但是随后将幻灯片图像推出了视线（向下）。

有人可以帮忙吗？

谢谢

Answer 1

填充的百分比由相对父宽度定义，在这种情况下为div.slick-track。
一种简单的修复方法是在其他地方应用填充：

li.slick-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
li.slick-slide .overlay {
  padding-top: 56.25%;
}

图像宽高比在光滑的滑块中不起作用

1 个答案: