(Bootstrap@5.3)Карусель: я хочу разместить основную карусель (внутреннюю карусель) в центре столбца. ⇐ CSS

[Anonymous]

Мне удалось центрировать подкарусель с помощью justify-content-center, но я не могу центрировать основную карусель.
Я также хочу применить затухание к изображению подкарусели и сделать границу активной. для выбранного элемента.
Это необязательно, но я также хочу установить стрелки на обоих концах главной карусели.
Я прилагаю изображение, созданное в Figma, для ссылку.

Вот что сейчас отображается с написанным мной кодом.
[img]https://i.stack.imgur .com/MJok2.jpg[/img]

Я сделал следующее, но ничего не помогло.

• set justify -content-center для строки
• Установить для text-center значение Col
• Поля CSS: автоматически

Это мой код
@section('content')

body {
overflow: scroll;
}

.thumbnail {
width: 70px;
height: 70px;
}

.inner-image {
width: 500px;
height: 600px;
object-fit: cover;
}

#bar_main {
background-color: #f2f2f2;
width: 50%;
}

#bar_progress {
background-color: #ff3a3a;
height: 10px;
width: 75%;
}

.card {
background-color: #f2f2f2;
}




























Product Name
Shop Name
$20.00

20 Items Left




Description

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quibusdam corporis culpa numquam aliquid similique praesentium ullam nisi, nostrum obcaecati incidunt? Velit aut ea id debitis fuga itaque perferendis impedit.



Quantity






Maximum purchase 5




@csrf


Add To Cart




@csrf


Whishlist









@endsection


Подробнее здесь: https://stackoverflow.com/questions/781 ... inner-in-t