Wie kann man mit der vertikalen Seitenleistennavigation 6 Bilder gleichzeitig verschieben? ⇐ HTML

[Anonymous]

Ich versuche, mit Swiper.js eine Bildergalerie zu erstellen. Folgendes möchte ich:
1. Die Galerie zeigt mehrere Bilder in einem Raster an (z. B. 2 Zeilen × 3 Spalten, insgesamt 6 Bilder pro Folie).
2. Wenn ich auf die Schaltfläche „Weiter“ klicke (in einer Seitenleiste rechts platziert), sollten **6 Bilder gleichzeitig** horizontal verschoben werden.
3. Die Bilder auf jeder Folie sollten in einem Raster ausgerichtet bleiben und nicht vertikal unterbrochen werden.
4. Ich möchte ein Layout erreichen, bei dem sich die Schaltfläche „Weiter“ in einer Seitenleiste rechts in der Galerie befindet.
Ich habe versucht, die Klassen „flex-wrap“ und „col-*“ in Swiper-Folien zu verwenden, aber wenn ich auf „Weiter“ klicke, werden die Bilder vertikal verschoben oder das Layout unterbrochen.
Wie kann ich Swiper dazu bringen, **6 Bilder gleichzeitig** zu verschieben, sie dabei in einem Raster auszurichten und die Navigation rechts zu platzieren? Seitenleiste?

Code: Select all

اخبار تصویری

Code: Select all

                \\
\\
\
\
\
\
\
\
\
\
[img]./assets/images/galleries/1.jpg[/img]
\
\
\
[img]./assets/images/galleries/2.webp[/img]
\
\
\
[img]./assets/images/galleries/3.jpg[/img]
\
\
\
[img]./assets/images/galleries/4.jpg[/img]
\
\
\
[img]./assets/images/galleries/5.webp[/img]
\
\
\
[img]./assets/images/galleries/6.jpg[/img]
\
\
\
\
\
[img]./assets/images/galleries/1.jpg[/img]
\
\
\
[img]./assets/images/galleries/2.webp[/img]
\
\
\
[img]./assets/images/galleries/3.jpg[/img]
\
\
\
[img]./assets/images/galleries/4.jpg[/img]
\
\
\
[img]./assets/images/galleries/5.webp[/img]
\
\
\
[img]./assets/images/galleries/6.jpg[/img]
\
\
\
\
\