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

#javascript #css #slider #slick.js

#javascript #css #ползунок #slick.js

Вопрос:

Итак, я перепробовал много способов. Чего я пытаюсь добиться, так это того, что у меня есть только 3 слайда, но также отображаются 3 слайда. Всякий раз, когда я ставлю slidesToShow: 3 ползунок, он перестает работать, а стрелки скрыты.

Мой код приведен ниже. Пожалуйста, помогите.

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: false,
  asNavFor: '.slider-nav',
  initialSlide: 0,
});

$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  focusOnSelect: true,
  arrows: true,
});

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

<div class="slider slider-for">
    <div>
      <div class="quote">
        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</h4>
      </div>
    </div>
    <div>
      <div class="quote">
        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</h4>
      </div>
    </div>
    <div>
      <div class="quote">
        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</h4>
      </div>
    </div>
</div>

<div class="slider slider-nav">
      <div>
        <div class="quote-image">
          <img src="https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png" alt="" width="200px">
        </div>
      </div>
      <div>
        <div class="quote-image">
          <img src="https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png" alt="" width="200px">
        </div>
      </div>
      <div>
        <div class="quote-image">
          <img src="https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png" alt="" width="200px">
        </div>
      </div>
    </div>

Ответ №1:

установить слайд-шоу: 2.99 это мой ответ

1. Можете ли вы добавить больше информации о том, почему это исправляет

2. У меня было 2 слайда, slidesToShow: 2 и infinite: true все же стрелки были скрыты. Настройка slidesToShow: 1.99 сделала свое дело, и теперь прокрутка снова работает.

Ответ №2:

Если у вас всего 3 слайда, и slidesToShow: 3 прокручивать нечего. Если слайды видны не полностью, вы можете попробовать удалить свой centerMode: true параметр.

 $('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    focusOnSelect: true,
    arrows: true,
});

Если вы хотите, чтобы что-то прокручивалось независимо от количества, вы можете попробовать настроить infinite: true .

1. Я также сталкиваюсь с этими стрелками слайдера, скрытыми, когда общее количество показанных слайдов и слайдов равно в этом codepen, хотя для infinite уже установлено значение true, стрелки по-прежнему не отображаются.. есть мысли? ( codepen.io/davecar21/pen/RwovWvB )