删除Slick缩略图滑块中左侧和右侧之间的空白区域

如何解决删除Slick缩略图滑块中左侧和右侧之间的空白区域

我创建了一个带有缩略图的圆滑滑块，需要在其中selectFocus的最后一个中间或右侧滑动。我正在使用以下代码，但无法正常工作。如果我将centerMode:true和infinite: true设置为在左侧和右侧之间留有白色缝隙

<div class="wrapper">
    <div class="slider img_gallery_single">
        <div>
            <figure>
                <img src="img/1.jpg" alt="" />
            </figure>
        </div>
    <div>
    <figure>
                        <img src="img/2.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/3.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/4.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/5.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/6.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/7.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/8.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/9.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/10.jpg" alt="" />
                    </figure>
                </div>
            </div>
            <div class="slider img_gallery_thumb_nav">
                <div>
                    <figure>
                        <img src="img/1.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/2.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/3.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/4.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/5.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/6.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/7.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/8.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/9.jpg" alt="" />
                    </figure>
                </div>
                <div>
                    <figure>
                        <img src="img/10.jpg" alt="" />
                    </figure>
                </div>
            </div>



<script>
            $(document).ready(function(){
                $('.img_gallery_single').slick({
                    slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: false,infinite: true,useTransform: true,speed: 400,cssEase: 'cubic-bezier(0.77,0.18,1)',});

                $('.img_gallery_thumb_nav')
                    .on('init',function(event,slick) {
                        $('.img_gallery_thumb_nav .slick-slide.slick-current').addClass('is-active');
                    })
                    .slick({
                        autoSlidesToShow: true,//slidesToShow: 5,slidesToScroll:1,dots: false,focusOnSelect: true,centerMode:true,variableWidth: true,});

                $('.img_gallery_single').on('afterChange',slick,currentSlide) {
                    $('.img_gallery_thumb_nav').slick('slickGoTo',currentSlide);
                    var currrentNavSlideElem = '.img_gallery_thumb_nav .slick-slide[data-slick-index="' + currentSlide + '"]';
                    $('.img_gallery_thumb_nav .slick-slide.is-active').removeClass('is-active');
                    $(currrentNavSlideElem).addClass('is-active');
                });

                $('.img_gallery_thumb_nav').on('click','.slick-slide',function(event) {
                    event.preventDefault();
                    var goToSingleSlide = $(this).data('slick-index');

                    $('.img_gallery_single').slick('slickGoTo',goToSingleSlide);
                });
            });
        </script>