【问题标题】:Slick Slider not fits inside container光滑的滑块不适合容器内
【发布时间】:2021-05-28 08:33:29
【问题描述】:

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

$(".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> 

【问题讨论】:

    标签: css slick.js


    【解决方案1】:

    我不完全了解您想要归档什么,但请尝试将width:50% 放入col-1col-2。这样两个元素可以在屏幕上共享同一行。

    【讨论】:

    • 感谢您的帮助。我希望将列并排放置。由于第二列包含光滑的滑块,它从容器中伸出。这就是我现在所面临的
    • 您可以尝试使用元素的z-index,这样当它们侵入其他元素的空间时就看不到它们了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-09-16
    • 2018-02-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多