مشكلة بضبط اتجاه عارض شرائح slick carousel

السلام عليكم

لما غييرت إتجاه الصفحة إختفى السلايدر ولايظهر إلا بعد ان اسحبه بالماوس وبمجرد الافلات يختفي مجددا

<section class="pt-100 pb-100 bg_img" style="background-image: url({{ asset($activeTemplateTrue.'/images/bg2.jpg') }});">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-6">
          <div class="section-header text-center">
            <h2 class="section-title">{{__(@$testimonialContent->data_values->heading)}}</h2>
            <p class="mt-3">{{__(@$testimonialContent->data_values->sub_title)}}</p>
          </div>
        </div>
      </div>
      <div dir="ltr" class="testimonial-slider">
          @foreach($testimonialElements as $item)
            <div class="single-slide">
                <div class="testimonial-card">
                  <div class="testimonial-card__top d-flex flex-wrap align-items-center">
                    <div class="client-thumb">
                      <img src="{{ getImage('assets/images/frontend/testimonial/'. @$item->data_values->image,'394x452') }}" alt="@lang('image')">
                    </div>
                    <div class="content">
                      
                      <h6 class="name">{{__(@$item->data_values->name)}}</h6>
                      <span class="designation fs-14px text--base">{{__(@$item->data_values->designation)}}</span>
                    </div>
                  </div>
                  <p class="mt-3">{{__(@$item->data_values->quote)}}</p>
                </div>
            </div>
        @endforeach
      </div>
    </div>
  </section>

// testimonial slider 
$('.testimonial-slider').slick({
  dots: true,
  infinite: true,
  autoplay: true,
  speed: 800,
  slidesToShow: 4,
  slidesToScroll: 1,
  arrows: false,
  responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
      }
    },
    {
      breakpoint: 992,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 576,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

لما أغيير infinite الى false

  infinite: false,

يصبح من يظهر لكن بالطبع لما تحرك الى آخر عنصر لاياتي من خلفه العنصر الأول , سؤالي لماذا تختفي لما تكون infinite true و الإتجاه rtl . أو هل من إقتراح لحل المشكل ؟ شكرا