Настройте режим центра в скользящем слайдере

Question

Я использую скользящий слайдер, пытаясь применить это изображение:

После многих поисков я достиг этого результата:

Как видите, я не могу поместить предметы за активным предметом, и я не могу также изменить стрелки, поэтому, ребята, мне нужна ваша помощь, кстати, я это проверял вопрос , который мне очень помог получить этот неполный результат

мой код:

css

body{
      overflow-x: hidden;
    }
    .content {
      font-family: 'Raleway', sans-serif;
      margin: auto;
      height: 300px;
    }
    .slick-list{
      overflow: visible;
    }
    .slick-slide:not(.slick-center) {
      z-index: 0;
      transform: scale(0.7);
      filter: opacity(30%);
    }

    .slick-active.slick-center+.slick-slide+.slick-slide {
      z-index: 1;
    }

    .slick-active.slick-center+.slick-slide,
    .slick-center+.slick-cloned {
      z-index: 2;
    }

    .slick-center {
      z-index: 3;
    }

    .slide .card .borderr {
      border: 4px solid #DDE8E7;
      padding: 10px;
    }

    .slide .card {
      box-shadow: 10px 10px 50px #00000026;
      border: 0;
      padding: 20px;
      position: relative;
      transform: translateX(-50%);
      left: 50%;
    }

    .slide h2 {
      font-weight: Bold;
      font-size: 29px;
      margin-top: 5px;
    }

    .slick-slide {
      position: relative;
      transition: transform 80ms;
    }

    .slide img {
      width: 100%
    }

    .slick-prev {
      left: 10% !important;
    }

    .slick-next {
      right: 10% !important;
    }

html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css" rel="stylesheet" />
  <link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick-theme.css" rel="stylesheet" />
  <script src="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>
<div class="container">

    <div class="content">
      <div class="center">
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
        <div>
          <div class="slide">
            <div class="card">
              <div class="borderr">
                <img src="./Screenshot_20.png" alt="">
                <h2>lurem owns the most influential Arabic newspaper in the Arab world </h2>
              </div>
            </div>
          </div>


        </div>
      </div>
    </div>

js

$('.center').slick({
        arrows: true,
        centerMode: true,
        infinite: true,
        centerPadding: '300px',
        slidesToShow: 1,
        speed: 600,
        // dots: true,
      });