作者 王毅

1

... ... @@ -146,10 +146,11 @@
color: #727171;
line-height: 30px;
}
.swiper-container {
width: 600px;
height: 300px;
}
width: 850px;
margin: 60px auto;
}
</style>
</head>
... ... @@ -387,22 +388,26 @@
</div>
<div class="contant">
<div class="swiper-container">
<div class="swiper-container swiper-container-horizontal">
<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 swiper-slide-active" style="height:236px; ">
<img src="../images/60.png" alt="" />
</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-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>
... ... @@ -500,17 +505,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)
... ... @@ -523,6 +528,12 @@
.siblings()
.removeClass("active");
});
var swiper = new Swiper(".swiper-container", {
pagination: ".swiper-pagination",
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 40
});
</script>
</body>
... ...