作者 王毅

1

@@ -146,10 +146,11 @@ @@ -146,10 +146,11 @@
146 color: #727171; 146 color: #727171;
147 line-height: 30px; 147 line-height: 30px;
148 } 148 }
  149 +
149 .swiper-container { 150 .swiper-container {
150 - width: 600px;  
151 - height: 300px;  
152 -} 151 + width: 850px;
  152 + margin: 60px auto;
  153 + }
153 </style> 154 </style>
154 </head> 155 </head>
155 156
@@ -387,22 +388,26 @@ @@ -387,22 +388,26 @@
387 </div> 388 </div>
388 389
389 <div class="contant"> 390 <div class="contant">
390 - <div class="swiper-container"> 391 + <div class="swiper-container swiper-container-horizontal">
391 <div class="swiper-wrapper"> 392 <div class="swiper-wrapper">
392 - <div class="swiper-slide">Slide 1</div>  
393 - <div class="swiper-slide">Slide 2</div>  
394 - <div class="swiper-slide">Slide 3</div> 393 + <div class="swiper-slide swiper-slide-active" style="height:236px; ">
  394 + <img src="../images/60.png" alt="" />
395 </div> 395 </div>
396 - <!-- 如果需要分页器 -->  
397 - <div class="swiper-pagination"></div>  
398 396
399 - <!-- 如果需要导航按钮 -->  
400 - <div class="swiper-button-prev"></div>  
401 - <div class="swiper-button-next"></div>  
402 -  
403 - <!-- 如果需要滚动条 -->  
404 - <div class="swiper-scrollbar"></div>  
405 -</div> 397 + <div class="swiper-slide swiper-slide-next" style="height:236px;">
  398 + <img src="../images/60.png" alt="" />
  399 + </div>
  400 + <div class="swiper-slide" style="height:236px;">
  401 + <img src="../images/60.png" alt="" />
  402 + </div>
  403 + </div>
  404 + <!-- Add Pagination -->
  405 + <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
  406 + <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span
  407 + ><span class="swiper-pagination-bullet"></span
  408 + ><span class="swiper-pagination-bullet"></span>
  409 + </div>
  410 + </div>
406 <div class="contant_img"> 411 <div class="contant_img">
407 <img src="../images/58.png" alt="" srcset="" /> 412 <img src="../images/58.png" alt="" srcset="" />
408 </div> 413 </div>
@@ -500,17 +505,17 @@ @@ -500,17 +505,17 @@
500 $(this).addClass("navbtnActive"); // 添加当前元素的样式 505 $(this).addClass("navbtnActive"); // 添加当前元素的样式
501 }); 506 });
502 }); 507 });
503 - var swiper = new Swiper(".swiper-container", {  
504 - pagination: ".swiper-pagination",  
505 - paginationClickable: true  
506 - }); 508 + // var swiper = new Swiper(".swiper-container", {
  509 + // pagination: ".swiper-pagination",
  510 + // paginationClickable: true
  511 + // });
507 512
508 - var swiper = new Swiper(".swiper-container1", {  
509 - pagination: ".swiper-pagination",  
510 - slidesPerView: 3,  
511 - paginationClickable: true,  
512 - spaceBetween: 30  
513 - }); 513 + // var swiper = new Swiper(".swiper-container1", {
  514 + // pagination: ".swiper-pagination",
  515 + // slidesPerView: 3,
  516 + // paginationClickable: true,
  517 + // spaceBetween: 30
  518 + // });
514 519
515 $(".content-word-left").on("click", "h4", function() { 520 $(".content-word-left").on("click", "h4", function() {
516 $(this) 521 $(this)
@@ -523,6 +528,12 @@ @@ -523,6 +528,12 @@
523 .siblings() 528 .siblings()
524 .removeClass("active"); 529 .removeClass("active");
525 }); 530 });
  531 + var swiper = new Swiper(".swiper-container", {
  532 + pagination: ".swiper-pagination",
  533 + slidesPerView: 3,
  534 + paginationClickable: true,
  535 + spaceBetween: 40
  536 + });
526 </script> 537 </script>
527 </body> 538 </body>
528 539