diff --git a/clinical/depart_detail.2.2.html b/clinical/depart_detail.2.2.html index a6c144d..e7df136 100644 --- a/clinical/depart_detail.2.2.html +++ b/clinical/depart_detail.2.2.html @@ -146,10 +146,11 @@ color: #727171; line-height: 30px; } + .swiper-container { - width: 600px; - height: 300px; -} + width: 850px; + margin: 60px auto; + } </style> </head> @@ -393,24 +394,28 @@ Clinical Resources<span>></span>Clinical Departments <span>></span>Medical Oncology<span>></span>Thoracic Medical Oncology </div> - + <div class="contant"> - <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> - <!-- 如果需要分页器 --> - <div class="swiper-pagination"></div> - - <!-- 如果需要导航按钮 --> - <div class="swiper-button-prev"></div> - <div class="swiper-button-next"></div> - - <!-- 如果需要滚动条 --> - <div class="swiper-scrollbar"></div> -</div> + <div class="swiper-container swiper-container-horizontal"> + <div class="swiper-wrapper"> + <div class="swiper-slide swiper-slide-active" style="height:236px; "> + <img src="../images/60.png" alt="" /> + </div> + + <div class="swiper-slide swiper-slide-next" style="height:236px;"> + <img src="../images/60.png" alt="" /> + </div> + <div class="swiper-slide" style="height:236px;"> + <img src="../images/60.png" alt="" /> + </div> + </div> + <!-- Add Pagination --> + <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"> + <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span + ><span class="swiper-pagination-bullet"></span + ><span class="swiper-pagination-bullet"></span> + </div> + </div> <div class="contant_img"> <img src="../images/58.png" alt="" srcset="" /> </div> @@ -508,17 +513,17 @@ $(this).addClass("navbtnActive"); // 添加当前元素的样式 }); }); - var swiper = new Swiper(".swiper-container", { - pagination: ".swiper-pagination", - paginationClickable: true - }); + // var swiper = new Swiper(".swiper-container", { + // pagination: ".swiper-pagination", + // paginationClickable: true + // }); - var swiper = new Swiper(".swiper-container1", { - pagination: ".swiper-pagination", - slidesPerView: 3, - paginationClickable: true, - spaceBetween: 30 - }); + // var swiper = new Swiper(".swiper-container1", { + // pagination: ".swiper-pagination", + // slidesPerView: 3, + // paginationClickable: true, + // spaceBetween: 30 + // }); $(".content-word-left").on("click", "h4", function() { $(this) @@ -531,6 +536,12 @@ .siblings() .removeClass("active"); }); + var swiper = new Swiper(".swiper-container", { + pagination: ".swiper-pagination", + slidesPerView: 3, + paginationClickable: true, + spaceBetween: 40 + }); </script> </body>