<swiper #swiper [config]="config" [virtual]="true" class="p-0 m-0 swiper-wrapper list-inline">
          <ng-template swiperSlide class="swiper-slide card-slide">
            <div>
              <app-blog-card blogImage="app/01.png" blogDate="02 Dec 2021"
                blogcontent="The Expierience: Travel Tales From India and Abroad."
                blogcontent1="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas dolor at feugiat in tempor maecenas placerat...">
              </app-blog-card>
            </div>
          </ng-template>
          <ng-template swiperSlide class="swiper-slide card-slide">
            <div>
              <app-blog-card blogImage="app/02.png" blogDate="02 Dec 2021"
                blogcontent="The Ultimate Travel Guide: What To Do, See & Eat."
                blogcontent1="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas dolor at feugiat in tempor maecenas placerat...">
              </app-blog-card>
            </div>
          </ng-template>
          <ng-template swiperSlide class="swiper-slide card-slide">
            <div>
              <app-blog-card blogImage="app/01.png" blogDate="02 Dec 2021"
                blogcontent="The Expierience: Travel Tales From India and Abroad."
                blogcontent1="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas dolor at feugiat in tempor maecenas placerat...">
              </app-blog-card>
            </div>
          </ng-template>
          <ng-template swiperSlide class="swiper-slide card-slide">
            <div>
              <app-blog-card blogImage="app/02.png" blogDate="02 Dec 2021"
                blogcontent="The Ultimate Travel Guide: What To Do, See & Eat."
                blogcontent1="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas dolor at feugiat in tempor maecenas placerat...">
              </app-blog-card>
            </div>
          </ng-template>
        </swiper> 

import { SwiperComponent } from "swiper/angular";
import SwiperCore, { SwiperOptions, Navigation, Virtual } from 'swiper';
SwiperCore.use([Navigation, Virtual])

 export class IndexComponent implements OnInit, AfterViewInit {
 config: SwiperOptions = {
    slidesPerView: 2,
    spaceBetween: 32,
    breakpoints: {
      320: { slidesPerView: 1 },
      550: { slidesPerView: 2 },
      991: { slidesPerView: 2 },
      1400: { slidesPerView: 2 },
      1500: { slidesPerView: 2 },
      1920: { slidesPerView: 2 },
      2040: { slidesPerView: 2 },
      2440: { slidesPerView: 2 }
    },
  }
  @ViewChild(SwiperComponent)
  swiper!: SwiperComponent;}