angular引用swiper插件绘制中间大两边依次缩小的轮播图

初步使用

安装

前人栽树后人乘凉，已经有大佬们封装好了。

npm install swiper
npm install @types/swiper

使用

在需要应用的模块中引入SwiperModule。
在需要应用的组件中，在ts文件中引入需要的对象类型，如Swiper或SwiperComponent，在html文件中引入<swiper>标签。
在style.css中引入插件需要的css：@import '../node_modules/swiper/swiper-bundle.css';。
具体参考https://swiperjs.com/angular/。

// swiper.module.ts 引入到需要的模块的imports数组
import { SwiperModule } from 'swiper/angular';// 方法1：获取到轮播图对象，进行应用
// swiper.component.ts
import Swiper from 'swiper';
swiper: Swiper;
onSwiper(swiper) { // 初始化this.swiper = swiper;console.log(swiper);
}
onSlideChange() { // 轮播变化console.log('slide change');
}
// swiper.component.html
<swiper [slidesPerView]="3" [spaceBetween]="50" (swiper)="onSwiper($event)"  (slideChange)="onSlideChange()"><ng-template swiperSlide>Slide 1</ng-template><ng-template swiperSlide>Slide 2</ng-template><ng-template swiperSlide>Slide 3</ng-template>
</swiper>// 方法2：获取到轮播图对象，进行应用
// swiper.component.ts
import { SwiperComponent } from 'swiper/angular';
@ViewChild(SwiperComponent, { static: false }) swiper: SwiperComponent;
// ViewChild的第一个参数可以修改为字符串形式的模板引用变量
// this.swiper.swiperRef即是轮播图对象，Swiper类型的值

问题

angularCLI版本过低需更新

ng update --next @angular/cli --force

升级使用

目标

展示5项内容，居中内容最大，两边依次减小

效果图

代码实现

ts
ts提供数据来源，获取轮播图对象，具体实现同上。

html

slidesPerView属性：slider容器能够同时显示的slides数量。
centeredSlides属性：设定为true时，active slide会居中，而不是默认状态下的居左。
centeredSlidesBounds属性：当设置了Active Slide居中后，还可以配合设置此参数，使得第一个和最后一个Slide 始终贴合边缘。
watchSlidesVisibility属性：每个可见slide增加一个Class Name，默认为’swiper-slide-visible’。
swiper方法：事件函数，初始化后执行。可选Swiper实例作为参数。
slideChange方法：事件函数。在当前Slide切换到另一个Slide时执行(activeIndex发生改变)，一般是在点击控制组件、释放滑动的时间点。可选Swiper实例作为参数。

<swiper style="height: 95%" [slidesPerView]="5" [centeredSlides]="true"  [centeredSlidesBounds]="true" [watchSlidesVisibility]="true" (swiper)="onSwiper($event)"  (slideChange)="onSlideChange($event)"><ng-container *ngFor="let data of dataSource;let i=index"><ng-template swiperSlide>// 内容</ng-template></ng-container>
</swiper>

css

可见项宽度调整
slidesPerView属性设置确定数值后，相当于为每一个slide都平均分配了宽度，我们需要做的只是改变当前可见项的宽，并且，所有可见项的宽度加起来需要等于100%，不然，就会对可见项前后的slide造成影响，因为他们的宽度是已经固定设置好了的，可见项宽度多了少了都会导致页面的不整齐。而对可见项进行操作，就需要设置watchSlidesVisibility属性。
缩放
具体设置参考了官方缩放样例：https://swiper.com.cn/demo/progress-effect.html
每个slide都有它的progress(进度、进程)，对于slide的progress属性，活动的那个为0，其他的依次减1。例：如果一共有6个slide，活动的是第三个，从第一个到第六个的progress属性分别是：2、1、0、-1、-2、-3。具体参照官方API的watchSlidesProgress属性，其中scale的设置为slide.transform('scale('+(1 - Math.abs(progress)/(展示数加一))+')')。

:host ::ng-deep .swiper-slide.swiper-slide-visible {width: 17.5%!important;margin: 0;transform: scale(0.67);transition: transform 1.0s;
}:host ::ng-deep .swiper-slide-prev.swiper-slide-visible {transform: scale(0.83);
}:host ::ng-deep .swiper-slide-next.swiper-slide-visible {transform: scale(0.83);
}:host ::ng-deep .swiper-slide-active.swiper-slide-visible {width: 30%!important;transform: scaleX(1);
}

angular引用swiper插件绘制中间大两边依次缩小的轮播图相关推荐

案例——封装一个轮播图插件
说起插件,可能很多人搞不清楚插件和类库.组件.框架的区别,在这里,我先来简单的聊一聊它们之间的区别和联系类库提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的 ...
2020/7/17 轮播图插件
demo : http://dsj-666.gitee.io/swiper 源码: <!DOCTYPE html> <html lang="en">< ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
微信小程序10：WXML 组件- 轮播图 swiper
微信小程序10:WXML 组件- 轮播图 swiper 官网地址https://developers.weixin.qq.com/miniprogram/dev/component/swiper.ht ...
微信小程序 swiper轮播图高度宽度自适应（解决轮播图图片显示不全问题）
之前从来没有接触过前端,最近开始学习微信小程序,因为没有基础所以学起来有点难度.在学习这个swiper标签的时候遇到了一些问题.首先一个问题就是轮播图中的图片显示不全,尽管已经给image设置成了wi ...
html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
vue项目中使用swiper实现中间大，两边小的轮播图
前言项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来实现效果如下: 下面我们来看下实现步骤: 第一步:首先在项目index.h ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...

angular引用swiper插件绘制中间大两边依次缩小的轮播图

初步使用

安装

使用

问题

升级使用

目标

效果图

代码实现

angular引用swiper插件绘制中间大两边依次缩小的轮播图相关推荐

最新文章

热门文章