微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

光滑的滑块不适合容器内

如何解决光滑的滑块不适合容器内

我在容器内使用光滑的滑块。容器有两列,分别是 col-1 和 col-2。 我希望它并排,因为我使用了 flex 但它不起作用。任何人都可以帮我解决这个问题。我的目标是实现这样一个滑块,其中推荐文本部分是固定的,只有右一滚动。问题是,当使用 flex 时,推荐滑块框作为单独的行下降

enter image description here

$(".testimonial-slider-wrap").slick({
    dots: true,arrows: true,slidesToShow: 1,slidesToScroll: 1,variableWidth: true,speed: 300,})
.testimonial-main-wrap {
     max-width: 136rem;
     margin-left: auto;
}
 .testimonial-main-wrap {
     display: flex;
     flex-wrap: wrap;
}
 .testimonial-col-1 {
     max-width: 39.5rem;
     margin-right: 4.2rem;
}
 
<section id="testimonial">
    <div class="testimonial-main-wrap">
        <div class="testimonial-col-1">
          <p>What Zaiyna clients say</p>
        </div>
        <div class="testimonial-col-2">
            <div class="testimonial-slider-wrap">
              <div class="testimonial-slides">
              </div>
            </div>
        </div>
    </div>
  </section> 

解决方法

我不完全明白您想要存档的内容,但尝试将 width:50% 放在 col-1col-2 中。这样两个元素就可以共享屏幕中的同一行。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。