正在显示
1 个修改的文件
包含
37 行增加
和
26 行删除
@@ -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 |
-
请 注册 或 登录 后发表评论