how to disable the previous and next slide's space in slick slider

Question

//Home Clients slick slider
$(".clients-sliderWrap").slick({
  dots: false,
  arrows: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  variableWidth: true,
  speed: 300,
  nextArrow: '<button class="slide-arrow clients-sliderContent-next-arrow"></button>',
  appendArrows: ".clients-slides",
  responsive: [
    {
      breakpoint: 575,
      settings: {
          centerMode: true,
      },
    }, 
  ],
});
$(".clients-sliderContent-next-arrow").on("click", function() {
  $(".clients-sliderWrap").slick("slickNext");
  // console.log("testimonial-slider clicked");
});

function setSlideVisibility() {
  var visibleSlides = $('.slick-slide[aria-hidden="false"]');
  $(visibleSlides).each(function() {
    $(this).addClass('opacity--1');
  });
  $(visibleSlides).first().prev().addClass('opacity--0');
  $(visibleSlides).last().next().addClass('opacity--0');

}

$(setSlideVisibility());

$('.clients-sliderWrap').on('beforeChange', function() {
  $('.slick-slide').each(function() {
    $(this).removeClass('opacity--1');
  });
});

$('.clients-sliderWrap').on('afterChange', function() {
  setSlideVisibility();
});

 <section class="clients">
        <div class="clientsWrap mx-auto">
            <div class="clientsLeftCol">
                <h6>Our Clients</h6>
            </div>
            <div class="clientsRightCol">
                <div class="clients-sliderWrap">
                    <div class="clients-slides position-relative">
                        <div class="clients-sliderContent">
                            <div class="clients-sliderContent-head">
                                <img src="assets/img/client-1.png" alt="client-img">
                                <h6>pocono modern</h6>
                            </div>
                            <div class="clients-sliderContent-body">
                                <h6>Lorem Ipsum</h6>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                            </div>
                        </div>
                    </div>
                   
                    <div class="clients-slides position-relative">
                        <div class="clients-sliderContent">
                            <div class="clients-sliderContent-head">
                                <img src="assets/img/client-1.png" alt="client-img">
                                <h6>pocono modern</h6>
                            </div>
                            <div class="clients-sliderContent-body">
                                <h6>Lorem Ipsum</h6>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Hi, I am using slick slider in my project.I have used centermode on 575px breakpoint.When i used it the an end portion of previous slide is shown also a starting portion of next slide is shown.I got a code to hide it but was not able to occupy that space.Can anyone help me to remove that spacing. The screenshot of issue enter image description here