angular中使用swiper

本文详细介绍了如何在Angular项目中安装并配置Swiper轮播图组件,包括必要的npm包安装、配置angular-cli.json文件、设置tsconfig.app.json和tsconfig.json,以及在组件中导入和使用Swiper的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考:
https://www.jb51.net/article/143450.htm

装包:

npm install swiper --save
npm install @types/swiper --save

angular-cli.json中:

"styles": [
        "../node_modules/swiper/dist/css/swiper.min.css"
      ],
"scripts": [
        "../node_modules/swiper/dist/js/swiper.min.js"
      ],

注:…/,不是./

tsconfig.app.json:

   "types": ["swiper"]

tsconfig.json:

"typeRoots": [
      "node_modules/@types"
    ],

ts中:

import Swiper from "swiper";


// 轮播图
    setTimeout(()=>{
      new Swiper('.swiper-container', {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // loop: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
      });
    })

注:延时执行了,要不然没有马上刷出来左右箭头



<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" *ngFor="let data of slides">
      <img [src]="data" alt="" width="100%">
    </div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>

  <!-- 如果需要导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
.swiper-container {
  width: 100%;
  height: 400px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值