Swiperスライダーは私がデモ-NO-210、そのリポジトリからを模倣しようとしています<a href="https://github.com/nolimits4web/Swiper" rel="nofollow noreferrer">here</a></p> <p>からswiperスライダーを使用していスライダーレイアウト

ための複数のビューをロードしません。Swiperスライダーは私がデモ-NO-210、そのリポジトリからを模倣しようとしています<a href="https://github.com/nolimits4web/Swiper" rel="nofollow noreferrer">here</a></p> <p>からswiperスライダーを使用していスライダーレイアウト

下図のように私のコードは次のとおりです。

index.htmlを

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="css/swiper.min.css"> 
    <link rel="stylesheet" href="css/app.css"> 

    <style> 
     .swiper-container { 
      width: 100%; 
      height: 100%; 
     } 

     .swiper-slide { 
      text-align: center; 
      font-size: 18px; 
      background: #fff; 
      /* Center slide text vertically */ 
      display: -webkit-box; 
      display: -ms-flexbox; 
      /* width: 50px; */ 
      display: -webkit-flex; 
      display: flex; 
      -webkit-box-pack: center; 
      -ms-flex-pack: center; 
      -webkit-justify-content: center; 
      justify-content: center; 
      -webkit-box-align: center; 
      -ms-flex-align: center; 
      -webkit-align-items: center; 
      align-items: center; 
     } 
    </style> 
    <title>xyz</title> 
</head> 

<body ng-app="myApp"> 
    <ng-view></ng-view> 

    <script src="bower_components/jquery/dist/jquery.js"></script> 

    <script src="js/swiper.min.js"></script> 

     <!-- Initialize Swiper --> 
     <script> 
      var swiper = new Swiper('.swiper-container', { 
       slidesPerView: 4, 
       spaceBetween: 30, 
       slidesPerGroup: 4, 
       loop: true, 
       loopFillGroupWithBlank: false, 
       pagination: { 
        el: '.swiper-pagination', 
        clickable: true, 
       }, 
       navigation: { 
        nextEl: '.swiper-button-next', 
        prevEl: '.swiper-button-prev', 
       }, 
      }); 
     </script> 
    <script src="bower_components/angular/angular.js"></script> 

</body> 

</html>

home.html

<div> 
<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 class="swiper-slide">Slide 4</div> 
      <div class="swiper-slide">Slide 5</div> 
      <div class="swiper-slide">Slide 6</div> 
      <div class="swiper-slide">Slide 7</div> 
      <div class="swiper-slide">Slide 8</div> 
      <div class="swiper-slide">Slide 9</div> 
      <div class="swiper-slide">Slide 10</div> 
     </div> 
     <div class="swiper-button-next"></div> 
     <div class="swiper-button-prev"></div> 
    </div> 

</div>

しかし、どういうわけか、私ができる唯一のスライダー画像1と左右の矢印をも動作しない。

しかし、私はここに

示すように複数のスライダーを持つようにしたい、私はここで行方不明です何があります：下記のように私が手効果がありますか？

出典

2017-10-28 Mrugesh Thaker

デベロッパーコンソールでエラーが発生しましたか？ – MegaColorBoy

デベロッパーコンソールにエラーはありません。 –

Slick Sliderを試してみてください。使用する方がはるかに優れています。 :)

出典

2017-10-28 12:48:39 MegaColorBoy

私はウェブサイトを通過しましたが、angular.jsプロジェクト用ではありません –

JavaScriptを自分のhtmlより下に移動する必要があります。下のコードはうまくいきますが、JavaScriptをHTMLの下に移動すると、あなたと同じように改行されます。

<!DOCTYPE html> 
<html> 

    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"> 
     <link rel="stylesheet" href="css/app.css"> 

     <style> 
      .swiper-container { 
       width: 100%; 
       height: 100%; 
      } 

      .swiper-slide { 
       text-align: center; 
       font-size: 18px; 
       background: #fff; 
       /* Center slide text vertically */ 
       display: -webkit-box; 
       display: -ms-flexbox; 
       /* width: 50px; */ 
       display: -webkit-flex; 
       display: flex; 
       -webkit-box-pack: center; 
       -ms-flex-pack: center; 
       -webkit-justify-content: center; 
       justify-content: center; 
       -webkit-box-align: center; 
       -ms-flex-align: center; 
       -webkit-align-items: center; 
       align-items: center; 
      } 
     </style> 
     <title>xyz</title> 
    </head> 
    <body> 
     <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 class="swiper-slide">Slide 4</div> 
       <div class="swiper-slide">Slide 5</div> 
       <div class="swiper-slide">Slide 6</div> 
       <div class="swiper-slide">Slide 7</div> 
       <div class="swiper-slide">Slide 8</div> 
       <div class="swiper-slide">Slide 9</div> 
       <div class="swiper-slide">Slide 10</div> 
      </div> 
      <div class="swiper-button-next"></div> 
      <div class="swiper-button-prev"></div> 
     </div> 


     <script src="bower_components/jquery/dist/jquery.js"></script> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> 

      <!-- Initialize Swiper --> 
     <script> 
      var swiper = new Swiper('.swiper-container', { 
       slidesPerView: 4, 
       spaceBetween: 30, 
       slidesPerGroup: 4, 
       loop: true, 
       loopFillGroupWithBlank: false, 
       pagination: { 
        el: '.swiper-pagination', 
        clickable: true, 
       }, 
       navigation: { 
        nextEl: '.swiper-button-next', 
        prevEl: '.swiper-button-prev', 
       }, 
      }); 
     </script> 

    </body> 

</html>

出典

2017-10-28 13:05:17

index.htmlに移動するとうまく動作します。しかし、私はhome.htmlに保管しても機能しません。（ここでは、これをangular.jsに統合したい） –

スライダ初期化スクリプトを角スクリプトタグの下に移動してみてください。私はスライダーが動作していないと思うのは、HTMLが存在しないのは、角度がページの一番下に達するまでそれが生成されないためです。 –

私もそれを試みましたが、残念ながらそれはうまくいきませんでした。 –

Swiperスライダーは私がデモ-NO-210、そのリポジトリからを模倣しようとしています<a href="https://github.com/nolimits4web/Swiper" rel="nofollow noreferrer">here</a></p> <p>からswiperスライダーを使用していスライダーレイアウト

答えて

関連する問題