在光滑的滑块旁边添加固定文本（使用内联块或 flex 会弄乱滑块大小）

Question

使用 Slick 滑块制作 changing/fading 行文本。我想在它的左边固定文本，并在滑块的右边显示动态文本。当我尝试在两个元素上使用 inline-block 时，滑块无法正确缩小以允许它在同一行上加入固定文本。当我使用 display: flex;在 .slider-container 上，它使滑块非常宽，从而使 .stationary 文本变小，并且即使使用 flex-grow 也不允许调整大小。请指教！

查看此处（和 comment/uncomment 查看内联块和 flex 行为：

( function( $ ) {

  // Add slick slider
  $('.slider').slick({
    dots: false,
    arrows: false,
    infinite: true,
    speed: 200,
    fade: true,
    cssEase: 'linear',
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000
  });

} )( jQuery );

/* INLINE-BLOCK: Does not allow slider to resize smaller */
.stationary, .slider {
  display: inline-block;
}

/* FLEX: Results in extremely wide slider and crunches down the .stationary block */
/* .slider-container {
  display: flex;
  align-items: center;
}

.stationary {
  flex-grow: 1;
} */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>

<div class="slider-container">
  <div class="stationary">You can: </div>
  <div class="slider">
    <div class="item">do this</div>
    <div class="item">make that</div>
    <div class="item">win this</div>
    <div class="item">give this</div>
  </div>
</div>

Answer 1

所以我在 JSFiddle 和运行中测试了你的代码以解决你提出的问题，它绞尽脑汁想找到一个真正动态的解决方案，但无法自动取款。但是我确实找到了一个解决方案，我只是在滑块上设置了 width，在容器上设置了 max-width。

您可以使用您的代码查看 Fiddle here 的解决方案。

// Add slick slider
$('.slider').slick({
  dots: false,
  arrows: false,
  infinite: true,
  speed: 200,
  fade: true,
  cssEase: 'linear',
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 1000
});

.slider-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 500px;
  overflow: hidden;
}

.stationary {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: auto;
  margin-right: 10px;
}

.slider {
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: 100%;
  text-align: left;
  width: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slider-container">
  <div class="stationary">You can: </div>
  <div class="slider">
    <div class="item">do this</div>
    <div class="item">make that</div>
    <div class="item">win this</div>
    <div class="item">give this</div>
  </div>
</div>

另外我想问一下，如果你需要使用 slick 来完成它并且可以选择使用更轻量级的方法 in this simple pure JS (jquery) based solution。

const answers = ['do this', 'make that', 'win this', 'give that'];
let activeIndex = 0;

$('.answer').text(answers[activeIndex]);

setInterval(() => {
  if (activeIndex === answers.length) {
    activeIndex = 0
  } else {
    activeIndex++
  }

  $('.answer').text(answers[activeIndex]);
}, 1500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<h1>
  You can: <span class="answer"></span>
</h1>

最后，我过去曾使用过一个插件来以最小的努力实现您想要做的事情。它叫做 "Typed"，这是他们的网站 https://mattboldt.com/demos/typed-js/。

在光滑的滑块旁边添加固定文本（使用内联块或 flex 会弄乱滑块大小）

Add stationary text next to slick slider (using inline-block or flex messes up slider sizing)

javascript

css

jquery

flexbox

slick.js