How to add config(slideoptions) swiper 9 ionic 7

Hi i want to implement swiper slider option in home.page.ts file angular project but could not find any way to do that…

I want somthing like to this to apply in html

config = new Swiper('.container', {
     slidesPerView: 2,
     spaceBetween: 50,
     centeredSlides: true,
     navigation: false,
     pagination: { clickable: true },
    scrollbar: { draggable: true },
  })
<swiper-container class="container" #swiper [config]="config">
      .... 
</swiper-container >

does it work if you write the prop like this?

<swiper-container slides-per-view="3" speed="500" loop="true" css-mode="true">
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  ...
</swiper-container>

i Know this is work…
but i have multiple slider style and i need to apply with options object… is there any way to do that?

i have static slider html code and should change style depend of api…

i don’t know if it could be a valid solution,
have you tried a json object?


like yourConfFile = {
slides-per-view: 3, 
speed: 500 
etc etc
}
 

and then

<swiper-container yourConfFile> ?

i tried this but it does not work…

maybe it’s not the best optimized solution, but you can solve it by switching cases depending on a certain condition

like

// Your component
export class YourComponent {
  // Assuming the environment flag is a string with possible values "case1", "case2", or "case3"
  environment: string = "case1"; // Set to one of the possible values based on your requirements
}
 
etc etc..

and then in your html file

<!-- Assuming "environment" is a string flag in your component -->

<ng-container [ngSwitch]="environment">

  <!-- Case 1: When "environment" is "case1" -->
  <ng-container *ngSwitchCase="'case1'">
    <swiper-container slides-per-view="3" speed="500" loop="true" css-mode="true">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      ...
    </swiper-container>
  </ng-container>

  <!-- Case 2: When "environment" is "case2" -->
  <ng-container *ngSwitchCase="'case2'">
    <swiper-container slides-per-view="5" speed="1500" loop="false" css-mode="false">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      ...
    </swiper-container>
  </ng-container>

  <!-- Case 3: When "environment" is "case3" -->
  <ng-container *ngSwitchCase="'case3'">
    <swiper-container slides-per-view="15" speed="300" loop="true" css-mode="false">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      ...
    </swiper-container>
  </ng-container>

  <!-- Default case: When "environment" does not match any of the defined cases -->
  <ng-container *ngSwitchDefault>
    <!-- Add any default content here if needed -->
  </ng-container>

</ng-container>

Thanks for help i have another issue with swiper slider of course…

<swiper-container [slidesPerView]="1" [loop]="true" [autoplay]="{delay: 100}" [pagination]="true">
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper-container>

autoplay does not work

try to write the prop like this:

autoplay="100"