javascript - 在光滑 slider 旁边添加固定文本(使用内联 block 或 Flex 会弄乱 slider 大小)

Question

使用 Slick slider 来改变/淡出文本行。我希望在其左侧显示固定文本，并在 slider 右侧显示动态文本。当我尝试在两个元素上使用 inline-block 时， slider 无法正确缩小尺寸以使其能够在同一行上加入固定文本。当我使用 display: flex; 时在 .slider-container 上，它使 slider 变得非常宽，从而使 .stationary 文本变得很小，并且即使使用 flex-grow 也不允许它调整大小。请指教!

请参阅此处(并注释/取消注释以查看内联 block 和 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 中测试了您的代码，并遇到了您提出的问题，它绞尽脑汁地寻找真正的动态解决方案，但无法找到。不过，我确实找到了一个解决方案，只需在 slider 上设置 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/ .