时间戳

首页 > 解决方案 > angular-ui-swiper - 如何设置选项？

angularjs - angular-ui-swiper - 如何设置选项？

问题描述

我正在尝试将 angular-ui-swiper 与 AngularJS 一起使用。实现非常简单，请看这里https://www.npmjs.com/package/angular-ui-swiper

但我无法为这个滑块设置更多选项，因为我在网上找不到角度示例。你能支持我吗？

我可以通过 html 代码中设置的“实例”属性访问滑块的实例。但我只是设法跳到一张特殊的幻灯片。但是，例如，我还希望最初每个视图有 3 张幻灯片。我怎样才能做到这一点？

谢谢

   <swiper  instance="instance">
                    <slides>
                        <slide  ng-repeat="subpage in sliderElements">
                            <img src="{{subpage.featuredImage}}" alt="" title=""/>
                        </slide>
                    </slides>
                    <prev></prev>
                    <next></next>
                    <pagination></pagination>
                </swiper>

以下是我需要的一些选项：

<script>
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 4,
  spaceBetween: 30,
  centeredSlides: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

https://github.com/nolimits4web/Swiper/blob/master/demos/130-centered.html

标签： angularjsswiper

解决方案

您应该以这种形式编写每个属性（添加 -）： <swiper slides-per-view="4">这与 slidesPerView: 4 相同

推荐阅读