Как настроить Slick Slider так, чтобы одновременно отображалось 3 элемента и для прокрутки нужно было прокрутить по 3 элемента?

Question

Вадим

slick , javascript

Как настроить Slick Slider так, чтобы одновременно отображалось 3 элемента и для прокрутки нужно было прокрутить по 3 элемента?

Как настроить элементы для отображения 3 элементов с возможностью прокрутки в 3 элемента без использования стрелок, и чтобы количество пунктов пагинации было равно 2? <br/> Вот мой текущий код: <br/> <pre><code class="html">.exper-row(style="background-image: url('img/svg/exper-row-bg.svg')")
            .exper-item 
              .exper-item-num 01
              h3.exper-item-title Civil engineering
            .exper-item 
              .exper-item-num 02
              h3.exper-item-title Machine and building foundations
            .exper-item 
              .exper-item-num 03
              h3.exper-item-title Silo and slipform construction
            .exper-item 
              .exper-item-num 04
              h3.exper-item-title Assesments, building inspection, concrete maintenance and repair
            .exper-item 
              .exper-item-num 05
              h3.exper-item-title International cement factory construction
            .exper-item 
              .exper-item-num 06
              h3.exper-item-title Construction in ongoing operations

          .exper-pagination 
            .exper-pagination-item
            .exper-pagination-item</code></pre> <br/> <pre><code class="javascript">$(".exper-row").slick({
    asNavFor: ".exper-pagination",
    slidesToShow: 3,
    slidesToScroll: 3,
    arrows: false
  });
  
  $(".exper-pagination").slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    asNavFor: '.exper-row',
    focusOnSelect: true
  });</code></pre>

27 апреля 2024 г. 5:20

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для того чтобы настроить Slick Slider так, чтобы одновременно отображалось 3 элемента и для прокрутки нужно было прокрутить по 3 элемента, достаточно изменить параметры slidesToShow и slidesToScroll на 3. 

Вот как будет выглядеть измененный код:

```javascript
$(".exper-row").slick({
    asNavFor: ".exper-pagination",
    slidesToShow: 3,
    slidesToScroll: 3,
    arrows: false
});
  
$(".exper-pagination").slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    asNavFor: ".exper-row",
    focusOnSelect: true
});
```

Чтобы отобразить 3 элемента с возможностью прокрутки в 3 элемента без использования стрелок, и чтобы количество пунктов пагинации было равно 2, можно добавить дополнительные параметры в настройки Slick Slider. Например, можно установить параметр dots: true для отображения точек пагинации.

Измененный код выглядит следующим образом:

```javascript
$(".exper-row").slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true
});
```

Таким образом, после внесения вышеуказанных изменений, вы сможете настроить Slick Slider для отображения 3 элементов с прокруткой в 3 элемента и добавить пагинацию с 2 пунктами.