無限ループのカルーセルスライダーにてセンターに表示しているアクティブなもののサイズのみ変更したい

前提・実現したいこと

業務内容に関係のある部分のためわかりづらいですが文字のみで質問させていただきます。
申し訳ございません。

jqueryプラグインであるswiperを使用してカルーセルスライダーの作成をしまして、
センターにアクティブな要素を表示し、その左右にスライダーの内容を表示しています。
図にして表しますと、

■ ■ ⬜︎ ■ ■　

↑このようなスライダーになります。全角の四角がアクティブなもの
その両端の黒四角がスライダー内容となります。

表示や基本的な動きは実装できているのですが、スライド時に中央の要素のみcssにて横幅を大きくし、transitionで動きをつけています。
その際無限スクロールの折り返しの箇所でバウンドするような動きとなってしまい
スライド時にtransitionの効いたスムーズな挙動となりません。
transitionを外しますとこのバグのような動きは解消されますが望んだ動きではないため
あくまでtransitionを機能させたものとしたいです。

この質問でお聞きしたいことはswiperなどプラグインでそもそも実装のできる挙動なのか、
スライダーを自作した方が早いのかなどです。

追加で書き忘れ分の補足です。
slickなどで対応しているtransform: scale(0.8);など拡大は
表示内容も変更し幅を大きくしたいため求めている挙動と異なります。

発生している問題・エラーメッセージ

swiperですと
.swiper-slide-activeに
width: "元のスライダーより大きい数値";
transition: all .3s;
を当てたときにおかしな挙動となります。

公式など公開されているデモでデベロッパーツールを使用して再現出来ると思いますので
確認していただけますと助かります。
こちらでデモを用意せず申し訳ございません。

該当のソースコード

css
1.swiper-slide-active{
2	-webkit-transition: all .3s;
3	transition: all .3s;
4	width: 通常時より大きい数値;
5}

js
1//swiperの設定内容です
2var settings = {
3            loop: true,
4            loopAdditionalSlides: 10,
5            slidesPerView: 'auto',
6            loopedSlides: 10,
7            speed: 600,
8            centeredSlides : false, 
9            autoplay: {
10                delay: 3000,
11                disableOnInteraction: false,
12            },
13            preloadImages: false,
14            lazy: {
15                loadPrevNext: true,
16            },
17            on: {
18                
19                slideChange: function () {
20                }
21            },
22            allowTouchMove: false,
23            pagination: {
24                el: '.swiper-pagination',
25                type: 'bullets',
26                clickable: true,
27            },
28            navigation: {
29                nextEl: '.swiper-button-next',
30                prevEl: '.swiper-button-prev',
31            },
32        },
33        mySwiper = new Swiper('.swiper-container', settings);