如何创建中间激活Slide更宽的滑块？

需要创建如下样式的滑块：

要求：

• 激活状态的Slide比其他Slide更宽（非放大效果，transform: scale不适用）
• 始终保持中间的激活Slide宽度大于其余Slide
• 尝试过Swiper、Glide.js未达到理想效果，以下是基于Glide.js的尝试代码：

HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.js"></script>
<div class="my-slider glide">
      <div class="glide__track" data-glide-el="track">
              <ul class="glide__slides">
                  <li class="glide__slide main">
                       <div class="card-red"></div>
                   </li>
                   <li class="glide__slide">
                       <div class="card-blue"></div>
                    </li>
                   <li class="glide__slide">
                      <div class="card-green"></div>
                   </li>
                  <li class="glide__slide">
                      <div class="card-red"></div>
                   </li>
                <li class="glide__slide">
                      <div class="card-blue"></div>
                   </li>
              </ul>
    </div>

<!--    <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--prev" data-glide-dir="<">prev</button>
        <button class="glide__arrow glide__arrow--next" data-glide-dir=">">next</button>
    </div> -->
</div>

CSS代码 #

.my-slider .glide__slide {
    border: 1px solid black;
    height: 200px;
    max-width: 150px;
}

.my-slider .glide__slide.glide__slide--active {
    max-width: calc(100vw - 360px);
    flex-grow: 1;
}

.card-red {
  background: lightPink;
  height: 100%;
}

.card-blue {
  background: lightBlue;
  height: 100%;
}

.card-green {
  background: lightGreen;
  height: 100%;
}

JavaScript代码 #

const cardsGlide = new Glide('.my-slider', {
    type: 'slider',
    perView: 3,
    rewind: false,
    focusAt: 'center',
    startAt: '1',
    gap: 18,
}).mount();

内容的提问来源于stack exchange，提问作者uiHellen