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

问题描述

我的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时，这看起来像是正确的尺寸，但是随后将幻灯片图像推出了视线（向下）。

有人可以帮忙吗？

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

aspect-ratio slick.js wordpress