組隊，探索滑塊不會加載滑塊佈局

我試圖模仿演示-NO-210從該存儲庫。

我的代碼如下所示：

的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移動到JavaScript下方時，它與您的代碼保持一致。

<!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中） –

嘗試移動角度腳本標記下方的滑塊初始化腳本。我認爲Slider不起作用，因爲html還不存在，因爲角度不會生成，直到我們到達頁面的最底部。 –

我也試過，但不幸的是它沒有解決。 –

組隊，探索滑塊不會加載滑塊佈局

回答

相關問題