swiper.js在angular里使用的一些问题

因为项目的框架用的是angular,而轮播用的是swiper.js,这个插件做轮播很高效和实用,不过可能angular也不是很熟,照着官方文档把swiper.js引入的时候,发现第一张图片永远是一闪而过,这就很尴尬,问题可能是我的轮播图片是通过ng-repeat从后台拿出来的数据。
swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块,则允许滑动多少个块。 而在angular始终在swiper初始化之后定义,swiper则无法正确scan有多少个slide(实际上找到一个待循环模板),所以划不动。现在直接贴出高效的解决方案,直接在js处理下控制器和swiper就可以:
js中代码:

//定义重定向,angularjs前台数据循环完了调用swiper.js代码
app.directive('repeatDone',function(){
return{
link:function(scope,element,attr){
if(scope.$last){
scope.$eval(attr.repeatDone);
}
}
}
}).controller('mainCtrl', ['$scope','$timeout',
function ($scope,$timeout) {
$scope.isRepeat=function(){
$timeout(function(){
var productDetailSlide=new Swiper('.swiper-container',{
autoplay:2500,
autoplayDisableOnInteraction:false,
pagination : '.swiper-pagination',
paginationClickable: true,
longSwipesRatio: 0.3,
touchRatio:1,
loop:true,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
})
$(".swiper-container").mouseenter(function () {//滑过悬停
productDetailSlide.stopAutoplay();//mySwiper 为上面你swiper实例化的名称
}).mouseleave(function(){//离开开启
produc
tDetailSlide.startAutoplay(); }})]
以上代码,就是加了一个重定向和定时函数,前端页面还是直接用swiper.js的插件的内容:

Swiper.js 是一个流行的轮播图插件,可以实现多种效果,如滑动、淡入淡出等。以下是使用 Swiper.js 的基本步骤: 1. 引入 Swiper.js 库 在 HTML 中引入 Swiper.js 库,可以使用 CDN 或下载到本地。例如: ```html <!-- CDN 引入 --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <!-- 本地引入 --> <link rel="stylesheet" href="path/to/swiper-bundle.min.css" /> <script src="path/to/swiper-bundle.min.js"></script> ``` 2. 创建 HTML 结构 在 HTML 中创建轮播图的结构,例如: ```html <div class="swiper-container"> <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> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> ``` 其中,`.swiper-container` 是容器,`.swiper-wrapper` 是轮播图的包裹元素,`.swiper-slide` 是每个轮播图的元素,`.swiper-pagination` 是轮播图的分页器,`.swiper-button-prev` 和 `.swiper-button-next` 是轮播图的前后按钮。 3. 初始化 Swiper 在 JavaScript 中初始化 Swiper,例如: ```js var mySwiper = new Swiper('.swiper-container', { // 选项 loop: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); ``` 其中,`.swiper-container` 是轮播图容器的选择器,`loop` 表示是否循环播放轮播图,`pagination` 表示分页器的选项,`navigation` 表示前后按钮的选项。 以上是使用 Swiper.js 的基本步骤,可以根据需要设置更多选项和样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值