I'm trying to create an image gallery using Swiper.js. Here is what I want:
1. The gallery displays multiple images in a grid (e.g., 2 rows × 3 columns, total 6 images per slide).
2. When I click the "next" button (placed in a sidebar on the right), **6 images should slide at a time** horizontally.
3. The images in each slide should stay aligned in a grid and not break vertically.
4. I want to achieve a layout where the "next" button is in a sidebar on the right of the gallery.
I have tried using `flex-wrap` and `col-*` classes inside Swiper slides, but when I click "next", the images move vertically or break layout.
How can I make Swiper slide **6 images at a time** while keeping them aligned in a grid and place the navigation in a right sidebar?
<div class="card mb-3 border-0">
<div class="card-header bg-brand text-white mb-3">
<div class="d-flex justify-content-between">
<span>اخبار تصویری</span>
<div class="d-flex align-items-end gap-2">
\<div class="btn bg-white swiper-btn-next"\>\</div\>
\<div class="btn bg-white swiper-btn-prev"\>\</div\>
\</div\>
\</div\>
\</div\>
\<div class="swiper gallery"\>
\<div class="swiper-wrapper"\>
\<div class="swiper-slide d-flex flex-wrap"\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/1.jpg" alt="هندوانه" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/2.webp" alt="برگ" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/3.jpg" alt="گربه" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/4.jpg" alt="کوه" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/5.webp" alt="دیدار" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/6.jpg" alt="ساختمان" class="object-fit-cover img-thumb"\>
\</div\>
\</div\>
\<div class="swiper-slide d-flex flex-wrap"\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/1.jpg" alt="هندوانه" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/2.webp" alt="برگ" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/3.jpg" alt="گربه" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/4.jpg" alt="کوه" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/5.webp" alt="دیدار" class="object-fit-cover img-thumb"\>
\</div\>
\<div class="col-4 mb-3"\>
\<img src="./assets/images/galleries/6.jpg" alt="ساختمان" class="object-fit-cover img-thumb"\>
\</div\>
\</div\>
\</div\>
\</div\>
\</div\>
