Как добавить пробелы между элементом карусели Slick

Я хочу добавить пробел между двумя пятнами карусели, но не хочу пространства с заполнением, потому что это уменьшает размер элемента (и я не хочу этого).

    $('.single-item').slick({
        initialSlide: 3,
        infinite: false
    });

.slick-slider {
    margin:0 -15px;
}
.slick-slide {
    padding:10px;
    background-color:red;
    text-align:center;
    margin-right:15px;
    margin-left:15px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="#" onclick="location.href='http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css'; return false;" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-12" style="background-color:gray;">
            <div class="slider single-item" style="background:yellow">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </div>
</div>

Ответы

Ответ 1

Да, я нашел решение проблемы.

Создайте один слайдер с дополнительной шириной с обеих сторон (что мы можем использовать для добавления пространства позиций с обеих сторон).
Создайте Внутренний элемент содержимого с соответствующей шириной и разницей с обеих сторон (это должен быть ваш фактический размер обертки)
Готово

Ответ 2

    /* the slides */
  .slick-slide {
    margin: 0 27px;
  }
  /* the parent */
  .slick-list {
    margin: 0 -27px;
  }

Эта проблема была анонсирована как проблема (# 582) в плагине github, и это решение было упомянуто и там (https://github.com/kenwheeler/slick/issues/582)

Ответ 3

@Ответ Dishan TD работает хорошо, но я получаю лучшие результаты, используя только margin-left.

Чтобы сделать это более понятным для всех остальных, вы должны обратить внимание на оба противоположных числа: 27 и -27

  /* the slides */
  .slick-slide {
    margin-left:27px;
  }

  /* the parent */
  .slick-list {
    margin-left:-27px;
  }

Ответ 4

Просто исправьте CSS:

/* the slides */
.slick-slider {
    overflow: hidden;
}
/* the parent */
.slick-list {
    margin: 0 -9px;
}
/* item */  
.item{
    padding: 0 9px;
}

Ответ 5

В скользящем слайде есть внутренний div, который можно использовать для создания промежутков между слайдами, не нарушая дизайн:

.slick-list {margin: 0 -5px;}
.slick-slide>div {padding: 0 5px;}

Ответ 6

С помощью псевдоклассов удаляются поля из первого и последнего дочерних элементов и используется адаптивная высота true в script. Попробуйте fiddle

Еще один Демо

 $('.single-item').slick({
        initialSlide: 3,
        infinite: false,
        adaptiveHeight: true
    });

Ответ 7

Добавить

centerPadding: '0'

Настройки ползунка будут выглядеть так:

$('.phase-slider-one').slick({
     centerMode: true,
     centerPadding: '0',
     responsive: [{breakpoint: 1024,},{breakpoint: 600,},{breakpoint: 480,}]
});

Спасибо

Ответ 8

Начиная с последних версий вы можете просто добавить margin в свой слайд:

.slick-slide {
  margin: 0 20px;
}

Нет необходимости в каких-либо отрицательных полях, так как скользкий расчет основан на элементах outterHeight.

Ответ 9

Попробуйте использовать псевдо-классы типа first-child и last-child для удаления дополнительных дополнений от первого и последнего дочерних элементов.

Осмотрите сгенерированный код слайдера и попробуйте удалить его.

Надеюсь, это поможет!!!

Ответ 10

Если вам нужно больше места между слайдами + не уменьшать ширину слайда, это означает, что вам нужно будет показывать меньше слайдов. В таком случае просто добавьте параметр, чтобы показывать меньше слайдов

    $('.single-item').slick({
      initialSlide: 3,
      infinite: false,
      slidesToShow: 3
    });

Другим вариантом является определение ширины слайда с помощью css без установки количества показов слайдов.

Ответ 11

Например: Добавьте этот data-attr в свой основной slick div: data-space = "7"

                    $('[data-space]').each(function () {
                        var $this = $(this),
                            $space = $this.attr('data-space');

                        $('.slick-slide').css({
                            marginLeft: $space + 'px',
                            marginRight: $space + 'px'
                        });

                        $('.slick-list').css({
                            marginLeft: -$space + 'px',
                            marginRight: -$space/2 + 'px'
                        })
                    });

Ответ 12

Улучшение, основанное на посте от Dishan TD (который также удаляет вертикальное поле):

  .slick-slide{
    margin-left:  15px;
    margin-right:  15px;
  }

  .slick-list {
    margin-left: -15px;
    margin-right: -15px;
    pointer-events: none;
  }

Примечание: указатель-события был необходим в моем случае, чтобы можно было нажать на стрелку влево.