Angular.jsのSwiperプラグインを使用してスライドできない問題を解決する方法

亚连
リリース: 2018-06-04 14:03:30
オリジナル
1543 人が閲覧しました

以下に、Angular.js で Swiper プラグインを使用するときにスライドできない問題を解決する記事を紹介します。これは良い参考値であり、皆様のお役に立てれば幸いです。

スワイパーが非常に優れたインタラクティブエクスペリエンスを備えたカルーセルプラグインであることは誰もが知っています

しかし、スワイパーが角度(ng-repeat)を介してループアウトする問題の解決策はカルーセルではありません

通常、私たちはそれを次のように実装します次のメソッド:

html

<p class="swiper-container" ng-controller="swiperController">
 <p class="swiper-wrapper">
  <p class="swiper-slide" ng-repeat="informarion in imgSrcs">
   <img ng-src="{{informarion.sliderSrc}}" />
  </p>
 </p>
 <!-- Add Pagination -->
 <p class="swiper-pagination"></p>
 <!-- Add Arrows -->
</p>
ログイン後にコピー

js

var myapp=angular.module("myApp",[]);
 //轮播图的控制器
 myapp.controller("swiperController",function($scope,$http){
  //请求轮播图路径
  $http({
   method: &#39;post&#39;,
   url: &#39;json/myJson.json&#39;
  }).then(function successCallback(response) {
   $scope.imgSrcs = response.data.sites;
  }, function errorCallback(response) {
   // 请求失败执行代码
  });
 });
ログイン後にコピー

ただし、それでも機能しません。 注: json でデータを取得している場合は、カルーセル js コードを記述する必要があります。 get data では、最初に取得するため、データに対してのみカルーセルが実行されます。外部に配置した場合、カルーセル データは取得できません。

そのため、解決策は $http リクエストに swiper の初期化メソッドを入れて実行することです

カルーセルを実現するには関数 successCallback() メソッドに次のコードを追加します

var swiper = new Swiper(&#39;.swiper-container&#39;, {//重置轮播加载方法
    pagination: &#39;.swiper-pagination&#39;,
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    keyboardControl: true,
    nextButton: &#39;.swiper-button-next&#39;,
    prevButton: &#39;.swiper-button-prev&#39;,
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true//修改swiper的父元素时,自动初始化swiper
   });
ログイン後にコピー

完全な JS コードは次のとおりです。 :

var myapp=angular.module("myApp",[]);
 //轮播图的控制器
 myapp.controller("swiperController",function($scope,$http){
  //请求轮播图路径
  $http({
   method: 'post',
   url: 'json/myJson.json'
  }).then(function successCallback(response) {
   $scope.imgSrcs = response.data.sites;
   var swiper = new Swiper(&#39;.swiper-container&#39;, {//重置轮播加载方法
    pagination: &#39;.swiper-pagination&#39;,
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    keyboardControl: true,
    nextButton: &#39;.swiper-button-next&#39;,
    prevButton: &#39;.swiper-button-prev&#39;,
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true//修改swiper的父元素时,自动初始化swiper
   });
  }, function errorCallback(response) {
   // 请求失败执行代码
  });
 });
ログイン後にコピー

あなたのために上記をまとめました。将来お役に立てば幸いです。

関連記事:

jQueryを使って左右にスライドさせるtoggleメソッドを実装するには?

JSフォームで値の転送とURLエンコード変換を実装するにはどうすればよいですか?

vueを介してv-forループで最初のチェックボックスがデフォルトでチェックされるようにするにはどうすればよいですか?

以上がAngular.jsのSwiperプラグインを使用してスライドできない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート