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

Question

使用平滑滑动条来更改/褪色文本行。我想要固定文本在其左侧，并在滑块的右侧显示动态文本。当我尝试在两个元素上都使用内联块时，滑块无法正确缩小尺寸，以使其无法在同一行上加入固定文本。当我使用display时：flex;在.slider-container上，它使滑块疯狂地变宽，从而使.stationary文本变小，并且即使使用flex-grow也不允许其调整大小。请指教！

请参阅此处（和注释/取消注释以查看内联代码块和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/[email protected]/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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。

您可以使用您的代码查看小提琴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>

另外，我想问一问，是否需要使用光滑的方法来完成此操作，或者使用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>

最后，过去我已经使用了一个插件，以最小的努力来实现您要尝试的功能。称为“类型化”，这是他们的网站https://mattboldt.com/demos/typed-js/。