Angular ngx-useful-swiper View Powerpoint .PPTX in Browser

In this tutorial, I’ll show you how to use TypeScript and Angular 13 ngx-useful-swiper to view Powerpoint (.PPTX) presentations inside a web browser.

ng new slide
cd slide
npm i ngx-useful-swiper


<h1>swiper demo</h1>
  <li><a href="" target="_blank" rel="noopener">npm</a></li>
  <li><a href="" target="_blank" rel="noopener">GitHub</a></li>
<swiper [config]="config" style="height: 400px; width: 400px;">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>


import { Component } from '@angular/core';
import { SwiperOptions } from 'swiper';

  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
export class AppComponent  {
    config: SwiperOptions = {
    pagination: { el: '.swiper-pagination', clickable: true },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    spaceBetween: 30


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.