_content-swiper.scss

Größe und Farbe der Vor- und Zurück-Buttons bzw. der Navigationspunkte können mit den custom properties --swiper-navigation-size und --swiper-theme-color geändert werden.

Der gesamte Swiper (.content-swiper) kann in der Breite angepasst werden: z.B. maximal 700 px breit, sonst 100% der verfügbaren Breite. 700px entspricht ungefähr der Textbreite (65ch - je nach Schrift muss der Wert angepasst werden).

.content-swiper {
  width: min(700px, 100%);
}

Der Swiper selbst braucht oben und unten noch etwas mehr Luft als andere Inhaltselemente:

.swiper {
  margin-block: 1.5rem;
}

Der .swiper-wrapper bekommt ein padding-block-end, um

Platz für box-shadow zu machen und um
die Navigationspunkte unterhalb des Inhalts zu platzieren.

Um die Navigationspfeile rechts und links vom Inhalt – und nicht darüberliegend – zu positionieren, muss beim Inhalt die Breite entsprechend der Breite des Sliders angepasst werden. Dafür reicht es, von den 100% (die durch die Begrenzung von .content-swiper fix vorgegeben ist), Platz für die Navigationspfeile (5rem) abzuziehen und diesen margin dann mit margin-inline: auto aufzuteilen.

@use "../abstracts/" as *;

// Optionen im Template content_element/swiper eintragen

:root {
  --swiper-navigation-size: 36px;
  --swiper-theme-color: #{$dunkles-orange};
}

.content-swiper {
  width: min(700px, 100%);
  .swiper {
    margin-block: 1.5rem;
  }
  .swiper-wrapper {
    padding-block-end: 2.5rem;
  }
  .content-text,
  .content-rsce-text-bild {
    width: calc(100% - 5rem);
    margin-block: auto;
    margin-inline: auto;
    padding-block: 1.5rem;
    padding-inline: 1.5rem;
    border: 1px solid $color-neutral-200;
    border-radius: 1rem;
    box-shadow: $box-shadow-dreamy-small;
  }
  .content-image {
    width: calc(100% - 5rem);
    margin-block: auto;
    margin-inline: auto;
  }
}