组队，探索滑块不会加载滑块布局

我试图模仿演示-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还不存在，因为角度不会生成，直到我们到达页面的最底部。 –

我也试过，但不幸的是它没有解决。 –

组队，探索滑块不会加载滑块布局

回答

相关问题