个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在尝试将 nolimts4web swiper 集成到我的 Angular 5 项目中，我在 index.html 文件中使用了
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
</head>
<body>
...
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js">
</script>
</body>
将其放入我的 HTML 文件中:
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slides -->
<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-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
并通过将其放在 index.html 中的 body 标记末尾之前进行初始化:
<script>
var mySwiper = new Swiper ('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
发生的情况是，它在滑动器中显示了幻灯片 1，但是单击“下一步”按钮没有执行任何操作，而且我无法滑动，基本上操作不起作用。
最佳答案
请使用此library避免 Swiper 在 html 加载之前初始化。
---- 更新 1 ----
在我看来，您的问题与 HTML 的生命周期有关，这意味着 Swiper 在浏览器加载/解释 html 之前初始化。为了避免这个问题，您可以使用链接库或仅创建如下所示的组件:
// Don't forget to declare Global variable related to Swiper.
declare var Swiper: any;
@Component({
selector: 'swiper',
template: `
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slides -->
<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-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
`
})
export class SwiperComponent implements AfterViewInit {
constructor(
private elementRef: ElementRef
) {}
//[...]
ngAfterViewInit() {
/**
* - Here you are 100% sure, html is present on DOM, Swiper is initialize and is able to find your DOM element.
* - Swiper constructor accept DOMElement as parameter, i recommand this approch to optimize DOM parsing.
* - Because you store Swiper instance as attribute, you will be able to control Swiper by javascript.
**/
this.swiper = new Swiper(this.elementRef.nativeElement.querySelector('.swiper-container'), {
//Here you can provide Swiper config
});
}
}
关于angular - Swiper 在 Angular 5 中不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49810045/
29
4
0
我正在尝试使用 swiper ( https://swiperjs.com/angular ) 以 Angular 创建旋转木马。 我收到此错误: 错误:node_modules/swiper/ang
我正在为 swiper 使用这种配置: var swiper = new Swiper('.swiper-container', { spaceBetween: 30, slidesPerVi
这几天我一直致力于在我的应用程序中设置刷卡器，但我仍然没有运气，从这里到 Github 问题或网络上的其他地方都没有找到任何工作示例。 我无法通过针对此问题的任何建议解决方案在垂直模式下设置滑动器的动
我正在使用 iDangerous Swiper 插件。我需要定期更改 ajax 方法中的所有幻灯片。执行相同操作的最佳方法是什么。 最佳答案 在 Swiper 上调用 destroy() 删除/用新幻
所以我在 friend 的推荐下使用 Swiper.js 来创建一个自动滚动的 slider 。但我无法弄清楚如何使幻灯片之间的过渡平滑。目前，当我更改自动播放 ms 时，它只会更改更改幻灯片所需的时
我想将分页元素符号从底部移动到查看区域的顶部。 目前，分页元素符号显示在所有包装器或 JavaScript 附加的幻灯片内容下方。我希望它出现在上面。 更多信息:https:/
我正在尝试为每个分页项目符号添加一个新的 element class，并且我想保留 swiper 的默认样式。所以我做的是 pagination={ clickable: true,
我有一个带有多个 slider 的简单页面。每个 slider 由三个 slider 组成；左、中、右。如果另一个 slider 发生变化，我想将所有 slider 重置到中间。可以将其想象为一个用户
我使用的是基本的刷卡器，没有任何选项。然后我的网站正文中有一个“mousemove”的监听器。我这样做是为了构建鼠标跟随器效果。这效果很好，但是当我开始拖动幻灯片时，似乎该事件将不再到达，并且我的自定
我使用的是基本的刷卡器，没有任何选项。然后我的网站正文中有一个“mousemove”的监听器。我这样做是为了构建鼠标跟随器效果。这效果很好，但是当我开始拖动幻灯片时，似乎该事件将不再到达，并且我的自定
我将 Swiper 设置为每列显示 2 行，但是当我这样做时，Swiper-Slide-Active 类未正确设置，即此类未应用于显示在中心的幻灯片 (2)滑动器的。 知道我在这里做错了什么吗？下面滑
我最近尝试在我的网站上设置“idangero.us Swiper”功能。不幸的是，它似乎不起作用。我对 JS 的经验非常有限，所以我完全不知道如何解决这个问题。 我收到的错误是Uncaught Ref
我正在使用 swiper 来显示不同的产品类别，在带有 swiper-slide 类的 div 中，以动态方式调用类别的产品。但并非所有产品都显示出来。即使溢出或高度为 100%，它也不会显示所有产品
我正在努力改变封面流程中的刷卡器幻灯片轮播。 这就是我现在得到的。 var mySwiper = new Swiper('.swiper-container-aboutus', { // Opti
我在网站上使用滑动 slider ，并且希望在只有一张幻灯片的情况下禁用它。 目前只有一张幻灯片会显示分页，您可以单击或滑动。理想情况下，如果只有一张幻灯片，则不应有任何交互。 我当前的js是:
如何删除 react-native-swiper-flatlist 最后一个 child 滑动分页点？我尝试了一些方法，但似乎不可能。请帮我。
我正在使用 Andre Ruffert 的 rangeslider.js在 iDangerous 之上 swiper.js但每次滑动我初始化的 Rangeslider 时，它也会刺激 Swiper 的
我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13)，但它给了我所有类型的错误。。首先，我试着像往常一样导入，从他们网站上列出的一个演示中复制过来，它显示得很好，但导航按钮不
我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13)，但它给了我所有类型的错误。。首先，我试着像往常一样导入，从他们网站上列出的一个演示中复制过来，它显示得很好，但导航按钮不
我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13)，但它给了我所有类型的错误。。首先，我试着像往常一样导入，从他们网站上列出的一个演示中复制过来，它显示得很好，但导航按钮不
我是一名优秀的程序员,十分优秀！