Добавьте неподвижный текст рядом с скользящим ползунком (используя встроенный блок или flex изменяет размер ползунка) - PullRequest
Новая
       8

Добавьте неподвижный текст рядом с скользящим ползунком (используя встроенный блок или flex изменяет размер ползунка)

0 голосов
/ 04 марта 2020

Использование слайдера Slick для создания изменяющейся / исчезающей строки текста. Я хочу, чтобы текст слева от него и отображался динамический текст c справа на слайдере. Когда я пытаюсь использовать inline-block для обоих элементов, ползунок не имеет правильного размера, чтобы позволить ему присоединиться к неподвижному тексту в одной строке. Когда я использую дисплей: flex; в контейнере .slider он делает слайдер безумно широким и, таким образом, делает текст .stationary крошечным и не позволяет изменять его размер даже при использовании flex-grow. Пожалуйста, сообщите!

См. Здесь (и комментарий / раскомментируйте, чтобы увидеть поведение inline-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>

1 Ответ

1 голос
/ 05 марта 2020

Итак, я протестировал ваш код в JSFiddle и столкнулся с проблемами, которые вы представили, и он загремел мозгом, чтобы найти действительно динамичное c решение, но не смог. Однако я нашел решение, в котором я просто установил width на ползунке и max-width на контейнере.

Вы можете увидеть Скрипку здесь с решением, используя ваш код. 

// 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>

Кроме того, я хотел бы спросить, нужно ли вам использовать слики для достижения sh, что вообще и альтернативно использовать более легкий подход как * * * * * * * * * * * * * *

* * * * * * * * * * в этом простом чистом JS (jquery) решении на основе .

*1019* 
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/.

...