Swiper中文论坛

标题: 多个swiper放在一起，发生样式错误，如何避免 [打印本页]
作者: 追风筝的人    时间: 2016-6-30 18:04
标题: 多个swiper放在一起，发生样式错误，如何避免
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Swiper demo</title>
  6.     <!-- Link Swiper's CSS -->
  7.      <link rel="stylesheet" href="../css/swiper-3.3.1.min.css"></style>

  9.     <!-- Demo styles -->
  10.     <style>
  11.     body {
  12.         background: #eee;
  13.         font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  14.         font-size: 14px;
  15.         color:#000;
  16.         margin: 0;
  17.         padding: 0;
  18.     }
  19.     .swiper-container {
  20.         width: 500px;
  21.         height: 300px;
  22.         margin: 20px auto;
  23.     }
  24.     .swiper-slide, .swiper-slide0 {
  25.         text-align: center;
  26.         font-size: 18px;
  27.         background: #fff;
  28.         
  29.         /* Center slide text vertically */
  30.         display: -webkit-box;
  31.         display: -ms-flexbox;
  32.         display: -webkit-flex;
  33.         display: flex;
  34.         -webkit-box-pack: center;
  35.         -ms-flex-pack: center;
  36.         -webkit-justify-content: center;
  37.         justify-content: center;
  38.         -webkit-box-align: center;
  39.         -ms-flex-align: center;
  40.         -webkit-align-items: center;
  41.         align-items: center;
  42.     }
  43.     </style>
  44. </head>
  45. <body>
  46.     <h1>基础使用</h1>
  47.     <!-- Swiper -->
  48.     <div class="swiper-container">
  49.         <div class="swiper-wrapper">
  50.             <div class="swiper-slide">Slide 1</div>
  51.             <div class="swiper-slide">Slide 2</div>
  52.             <div class="swiper-slide">Slide 3</div>
  53.             <div class="swiper-slide">Slide 4</div>
  54.             <div class="swiper-slide">Slide 5</div>
  55.             <div class="swiper-slide">Slide 6</div>
  56.             <div class="swiper-slide">Slide 7</div>
  57.             <div class="swiper-slide">Slide 8</div>
  58.             <div class="swiper-slide">Slide 9</div>
  59.             <div class="swiper-slide">Slide 10</div>
  60.         </div>
  61.           <!-- 如果需要分页器 -->
  62.          <div class="swiper-pagination"></div>
  63.              <!-- 如果需要导航按钮 -->
  64.         <div class="swiper-button-prev"></div>
  65.         <div class="swiper-button-next"></div>
  66.         
  67.         <!-- 如果需要滚动条 -->
  68.         <div class="swiper-scrollbar"></div>
  69.     </div>

  71.     <!-- Swiper JS -->
  72.    <script src="../js/jquery.min.js"></script>
  73.    <script src="../js/swiper-3.3.1.jquery.min.js"></script>

  75.     <!-- Initialize Swiper -->
  76.     <script>
  77.     var swiper = new Swiper('.swiper-container', {
  78.     direction: 'vertical',
  79.     loop: true,
  80.     // 如果需要分页器
  81.     pagination: '.swiper-pagination',
  82.     // 如果需要前进后退按钮
  83.     nextButton: '.swiper-button-next',
  84.     prevButton: '.swiper-button-prev',
  85.     // 如果需要滚动条
  86.     scrollbar: '.swiper-scrollbar',
  87.   });//初始化swiper插件
  88.     </script>
  89.     <h2>让分页器的事件生效</h2>
  90.     <div class="swiper-container">
  91.         <div class="swiper-wrapper">
  92.             <div class="swiper-slide">Slide 1</div>
  93.             <div class="swiper-slide">Slide 2</div>
  94.             <div class="swiper-slide">Slide 3</div>
  95.             <div class="swiper-slide">Slide 4</div>
  96.             <div class="swiper-slide">Slide 5</div>
  97.             <div class="swiper-slide">Slide 6</div>
  98.             <div class="swiper-slide">Slide 7</div>
  99.             <div class="swiper-slide">Slide 8</div>
  100.             <div class="swiper-slide">Slide 9</div>
  101.             <div class="swiper-slide">Slide 10</div>
  102.         </div>
  103.         <!-- Add Pagination -->
  104.         <div class="swiper-pagination"></div>
  105.     </div>
  106.     <script>
  107.     var swiper2 = new Swiper('.swiper-container', {
  108.         pagination: '.swiper-pagination',
  109.         paginationClickable: true
  110.     });
  111.     </script>
  112.      <!-- Swiper -->
  113.     <div class="swiper-container">
  114.         <div class="swiper-wrapper_0">
  115.             <div class="swiper-slide">Slide 1</div>
  116.             <div class="swiper-slide">Slide 2</div>
  117.             <div class="swiper-slide">Slide 3</div>
  118.             <div class="swiper-slide">Slide 4</div>
  119.             <div class="swiper-slide">Slide 5</div>
  120.             <div class="swiper-slide">Slide 6</div>
  121.             <div class="swiper-slide">Slide 7</div>
  122.             <div class="swiper-slide">Slide 8</div>
  123.             <div class="swiper-slide">Slide 9</div>
  124.             <div class="swiper-slide">Slide 10</div>
  125.         </div>
  126.         <!-- Add Pagination -->
  127.         <div class="swiper-pagination"></div>
  128.     </div>
  129.      <script>
  130.     var swiper = new Swiper('.swiper-container', {
  131.         pagination: '.swiper-pagination',
  132.         paginationClickable: true,
  133.         spaceBetween: 30,
  134.         wrapperClass : 'swiper-wrapper_0',
  135.     });
  136.     </script>
  137. </body>
  138. </html>
复制代码
已经使用命名空间，然而无效

QQ图片20160630180239.png (18.85 KB, 下载次数: 98)

QQ图片20160630180239.png
作者: 逗逼风云    时间: 2016-7-8 11:06
更改swiper-container的名字就可以了



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2