安装
npm install swiper@5安装完成
"swiper": "^5.4.5"引用
// js
import Swiper from "swiper";
// css
import "swiper/css/swiper.min.css";html代码
![]()
{{ item.name }}
js代码
//导入js
import Swiper from "swiper";
//引入css
import "swiper/css/swiper.min.css";
export default {
data() {
return {
list: [],
};
},
mounted() {
this.getList();
},
methods: {
getList() {
this.list = [
{
id: 1,
name: "标题1",
img: require("@/assets/1.jpg"),
服务器托管网 },
{
id: 1,
name: "标题2",
img: require("@/assets/1.jpg"),
},
{
id: 1,
name: "标题3",
img: require("@/assets/1.jpg"),
},
{
id: 1,
name: "标题4",
img: require("@/assets/1.jpg"),
},
{
id: 1,
name: "标题5",
img: require("@/assets/1.jpg"),
},
];
this.$nextTick(function () {
new Swiper(".swiper-container", {
loop: true, // 循环模式选项
slidesPerView: 4,
autoplay: true,
spaceBetween: 10,
});
});
},
},
};完整代码
![]()
{{ item.name }}
//导入js
import Swiper from "swiper";
//引入css
import "swiper/css/swiper.min.css";
export default {
data() {
return {
list: [],
};
},
mounted() {
this.getList();
},
methods: {
getList() {
this.list = [
{
id: 1,
name: "标题1",
img: require("@/assets/1.jpg"),
},
{
id: 1,
name: "标题2",
img: require("@/assets/1.jpg"),
},
{
id: 1,
name: "标题3",
img: require("@/assets/1.jpg"),
},
{
id: 1,
name: "标题4",
img: require("@/assets/1.jpg"),
},
{
服务器托管网 id: 1,
name: "标题5",
img: require("@/assets/1.jpg"),
},
];
this.$nextTick(function () {
new Swiper(".swiper-container", {
loop: true, // 循环模式选项
slidesPerView: 4,
autoplay: true,
spaceBetween: 10,
});
});
},
},
};
.item-img {
width: 100%;
height: 200px;
}
.item-img img {
width: 100%;
height: 100%;
}
.item-title {
text-align: center;
margin-top: 20px;
font-size: 20px;
}
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
还记得在 使用 Cilium 增强 Kubernetes 网络安全 示例中，我们通过设置网络策略限制钛战机 tiefighter 访问死星 deathstar 的 /v1/exhaust-port 端点，但放行着陆请求 /v1/request-landing。…
