슬릭 회전목마 아이템 사이에 공백을 추가하는 방법

슬릭 회전목마 아이템 사이에 공백을 추가하는 방법

두 개의 매끄러운 회전목마 아이템 사이에 공간을 추가하고 싶지만 패딩이 있는 공간을 원하지 않습니다. 왜냐하면 그것이 내 요소 크기를 줄이고 있기 때문입니다. (그리고 나는 그것을 원하지 않습니다.)

    $('.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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" 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>

어찌된 일인지 양쪽에서 공간이 확보되고 있어, 그걸 없애려고 노력하고 있습니다.

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

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

이 문제는 플러그인의 github에서 문제(#582)로 보고되었지만, 이 솔루션도 거기서 언급되었습니다. (https://github.com/kenwheeler/slick/issues/582)

슬릭슬릭 슬라이드에는 내부 래핑 디브(wrapping div)가 있어 디자인을 깨지 않고 슬라이드 사이에 간격을 만들 수 있습니다.

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

부터 를 만 하면 .margin슬라이드:

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

은 에 어떤 outerHeight.

@Dishan TD의 답변도 좋지만, 마진 레프트만 사용하면 더 좋은 결과를 얻고 있습니다.

그리고 이것을 다른 모든 사람들에게 더 명확하게 하기 위해, 여러분은 27과 -27이라는 두 반대의 숫자에 주목해야 합니다.

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

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

Dishan TD의 게시물을 기반으로 개선(수직 여백도 제거):

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

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

참고: 왼쪽 화살표를 클릭하려면 포인터 이벤트가 필요했습니다.

네, 저는 해결책을 찾았습니다.

• 가로 폭이 양쪽에서 추가된 슬라이더 상자를 하나 만듭니다(양쪽에서 항목 공간을 추가하는 데 사용할 수 있습니다).
• 양쪽에서 적절한 너비와 여백으로 내부 항목 콘텐츠 생성(실제 포장지 크기여야 함)
• 다 했어요.

CSS 수정하기만 하면 됩니다.

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

단순히 슬릭 사이드 클래스에 패딩을 추가하면 됩니다.

.slick-slider .slick-slide {
  padding: 0 15px;
}

의사 클래스의 도움으로 첫 번째와 마지막 자식의 여백을 제거하고 스크립트에서 적응 높이 true를 사용했습니다.이 바이올린을 사용해 보세요.

데모 하나 더

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

은.gapflexbox의 속성은 꽤 괜찮은 지원을 제공합니다. https://caniuse.com/flexbox-gap

따라서 다음을 사용할 수 있습니다.

.slick-track {
    display: flex;
    gap: 1rem;
}

요소 사이에만 공간이 추가됩니다.

예를 들어,이 데이터 특성을 기본 슬릭 디브에 추가하십시오: 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'
                        })
                    });

더하다

centerPadding: '0'

슬라이더 설정은 다음과 같습니다.

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

감사해요.

:first-child & :last-child 같은 유사 클래스를 사용하여 첫 번째 및 마지막 자식에서 추가 패딩을 제거합니다.

생성된 슬릭슬릭 슬라이더의 코드를 검사하고 그 위에 패딩을 제거합니다.

희망, 도움이 될거에요!!!

슬라이드의 너비를 줄이지 않고 슬라이드 사이의 간격을 크게 하려면 슬라이드를 적게 표시해야 합니다.이 경우 슬라이드를 적게 표시하도록 설정을 추가하기만 하면 됩니다.

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

다른 옵션은 표시할 슬라이드의 양을 설정하지 않고 CSS로 슬라이드의 너비를 정의하는 것입니다.

이 접근 방식은 다음과 같은 최신 버전의 반응-슬릭(react-slick:

  .slick-list {
    margin: 0 -7px !important;
  }
  
  .slick-slide > div {
    padding: 0 7px !important;
  }

스크린 화면
data-sm, data-md, data-lg, data-xl, data-xxland 기본 화면 크기 data-default

항목 사이를 띄우려면 space=10, 여기서 10은 "em"의 크기입니다.

예: 작은 화면에서 중간 화면으로 설정 공간이 있고, 큰 화면에서 아주 큰 화면으로 설정 공간 5 data-default= "[space=2]" data-xl= "[space=5]"

참고: data-default="[space=1]" 이 속성은 "your-slick-slider 클래스"에서만 설정해야 합니다.

자바스크립트 코드

function slickSpacing(space, self){
    self.find('.slick-slide').css({
        marginLeft: space + 'em',
        marginRight: space + 'em'
    });
    self.find('.slick-list').css({
        marginLeft: -space + 'em',
        marginRight: -space/2 + 'em'
    });
}
function slickSlider(){
    $('.slick-slider').each(function () {
        var self = $(this);
        // var screenSize = String(self.attr('data-md')).match(/screen=([0-9]+)/);
        var spaceDefaultSize = String(self.attr('data-default')).match(/space=([0-9]+)/);
        var spaceSmSize = String(self.attr('data-sm')).match(/space=([0-9]+)/);
        var spaceMdSize = String(self.attr('data-md')).match(/space=([0-9]+)/);
        var spaceLgSize = String(self.attr('data-lg')).match(/space=([0-9]+)/);
        var spaceXlSize = String(self.attr('data-xl')).match(/space=([0-9]+)/);
        var spaceXxlSize = String(self.attr('data-xxl')).match(/space=([0-9]+)/);
        if(String(spaceDefaultSize) !== "null"){
            if($(window).innerWidth() >= 0){
                slickSpacing(spaceDefaultSize[1], self)
            }
        }
        if(String(spaceSmSize) !== "null"){
            if($(window).innerWidth() >= 576){
                slickSpacing(spaceSmSize[1], self)
            }
        }
        if(String(spaceMdSize) !== "null"){
            if($(window).innerWidth() >= 768){
                slickSpacing(spaceMdSize[1], self)
            }
        }
        if(String(spaceLgSize) !== "null"){
            if($(window).innerWidth() >= 992){
                slickSpacing(spaceLgSize[1], self)
            }
        }
        if(String(spaceXlSize) !== "null"){
            if($(window).innerWidth() >= 1200){
                slickSpacing(spaceXlSize[1], self)
            }
        }
        if(String(spaceXxlSize) !== "null"){
            if($(window).innerWidth() >= 1400){
                slickSpacing(spaceXxlSize[1], self)
            }
        }
    });
}
$(window).on('resize load', function(){
    slickSlider();
});

HTML 코드

<div class="service-slider overflow-hidden" data-default="[space=1]" data-xl="[space=5]">
    <div></div>
    <div></div>
    <div></div>
</div>

슬라이드 항목에 테두리를 추가하여 위조할 수 있습니다.Slick Slider 스타일을 재정의하는 것이 아니라 생성한 요소에 테두리를 추가하여 슬라이더로 변환됩니다.이와 같은 것:

.my-slide-element {
    &:not(:first-child):not(:last-child) {
        border-left: 2px solid white;
        border-right: 2px solid white;
    }

    &:first-child {
        border-right: 4px solid white;
    }

    &:last-child {
        border-left: 4px solid white;
    }
}

.slick-slide {
  margin: 0 10px;
}
.slick-list {
  margin: 0 -10px;
}

언급URL : https://stackoverflow.com/questions/30999076/how-add-spaces-between-slick-carousel-item