swiper轮播图插件简单使用
swiper
<!DOCTYPE html>
<html lang="en" backgound="">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
<link href="../public/plugins/swiper-8.3.0/swiper-bundle.min.css" rel="stylesheet" />
</head>
<style>
.swiper-slide {
border: 1px solid blue;
}
.swiper-slide1 {
transition: 300ms;
transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1);
}
.swiper-slide7 {
height: calc((100% - 30px) / 2);
}
.swiper-wrapper1 {
/* 通过改变animation-timing-function 制作弹性切换效果 */
transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}
</style>
<body class="bg-light">
<div class="container-fluid mt-3">
<!-- content ------------------------------------- -->
<div class="row">
<div class="col-4">
<div class="card p-2">
<div class="swiper swiper1" style="width: 100%; height: 400px">
<div class="swiper-wrapper">
<div class="swiper-slide" style="width: 100%; height: 400px" id="main1"></div>
<div class="swiper-slide" style="width: 100%; height: 400px" id="main2"></div>
<div class="swiper-slide" style="width: 100%; height: 400px" id="main3"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</div>
<div class="col-4">
<div class="card p-2">
<div class="swiper swiper3" style="width: 100%; height: 400px">
<div class="swiper-wrapper">
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies1</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies2</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies3</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies3</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies4</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies5</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies6</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies7</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies8</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies9</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies10</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies11</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies12</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies13</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies14</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies15</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies16</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies17</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies18</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies19</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies20</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies21</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies22</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies23</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</div>
<div class="col-4">
<div class="card p-2">
<div class="swiper swiper2" style="width: 100%; height: 400px">
<div class="swiper-wrapper">
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies1</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies2</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies3</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies3</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies4</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies5</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies6</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies7</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies8</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies9</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies10</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies11</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies12</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies13</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies14</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies15</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies16</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies17</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies18</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies19</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies20</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies21</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies22</div>
<div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies23</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-6">
<div class="card p-2">
<div class="swiper swiper4 swiper-horizontal" style="width: 100%; height: 300px">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="0">Slide 1</div>
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="1">Slide 2</div>
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="2">Slide 3</div>
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="3">Slide 4</div>
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="4">Slide 5</div>
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="5">Slide 6</div>
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="6">Slide 7</div>
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="7">Slide 8</div>
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="8">Slide 9</div>
<div class="swiper-slide swiper-slide1" data-swiper-slide-index="9">Slide 10</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="col-6">
<div class="card p-2">
<div class="swiper swiper7 swiper-horizontal" style="width: 100%; height: 300px">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="0">Slide 1</div>
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="1">Slide 2</div>
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="2">Slide 3</div>
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="3">Slide 4</div>
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="4">Slide 5</div>
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="5">Slide 6</div>
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="6">Slide 7</div>
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="7">Slide 8</div>
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="8">Slide 9</div>
<div class="swiper-slide swiper-slide7" data-swiper-slide-index="9">Slide 10</div>
</div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-6">
<div class="card p-2">
<div class="swiper swiper6 swiper-horizontal" style="width: 100%; height: 300px">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-slide-index="0">Slide 1</div>
<div class="swiper-slide" data-swiper-slide-index="1">Slide 2</div>
<div class="swiper-slide" data-swiper-slide-index="2">Slide 3</div>
<div class="swiper-slide" data-swiper-slide-index="3">Slide 4</div>
<div class="swiper-slide" data-swiper-slide-index="4">Slide 5</div>
<div class="swiper-slide" data-swiper-slide-index="5">Slide 6</div>
<div class="swiper-slide" data-swiper-slide-index="6">Slide 7</div>
<div class="swiper-slide" data-swiper-slide-index="7">Slide 8</div>
<div class="swiper-slide" data-swiper-slide-index="8">Slide 9</div>
<div class="swiper-slide" data-swiper-slide-index="9">Slide 10</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="col-6">
<div class="card p-2">
<div class="swiper swiper5 swiper-horizontal" style="width: 100%; height: 300px">
<div class="swiper-wrapper swiper-wrapper1">
<div class="swiper-slide" data-swiper-slide-index="0">Slide 1</div>
<div class="swiper-slide" data-swiper-slide-index="1">Slide 2</div>
<div class="swiper-slide" data-swiper-slide-index="2">Slide 3</div>
<div class="swiper-slide" data-swiper-slide-index="3">Slide 4</div>
<div class="swiper-slide" data-swiper-slide-index="4">Slide 5</div>
<div class="swiper-slide" data-swiper-slide-index="5">Slide 6</div>
<div class="swiper-slide" data-swiper-slide-index="6">Slide 7</div>
<div class="swiper-slide" data-swiper-slide-index="7">Slide 8</div>
<div class="swiper-slide" data-swiper-slide-index="8">Slide 9</div>
<div class="swiper-slide" data-swiper-slide-index="9">Slide 10</div>
</div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.js"></script>
<script src="../public/plugins/jquery-1.9.1.js"></script>
<script src="../public/plugins/layer-v3.5.1/layer.js"></script>
<script src="../public/plugins/echarts.min.js"></script>
<script src="../public/plugins/swiper-8.3.0/swiper-bundle.min.js"></script>
<script src="../public/plugins/swiper-8.3.0/TweenMax.min.js"></script>
<script>
var swiper = new Swiper(".swiper7", {
slidesPerView: 3,
grid: {
rows: 2,
},
spaceBetween: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiper = new Swiper(".swiper6", {
keyboard: true,
virtualTranslate: true,
on: {
setTranslate: function () {
this.$wrapperEl.transition("");
TweenMax.to(this.$wrapperEl, 1.5, { x: this.translate, ease: Power4.easeOut });
},
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
var swiper = new Swiper(".swiper5", {
speed: 2000,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiper = new Swiper(".swiper4", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
var mySwiper = new Swiper(".swiper1", {
initialSlide: 0,
// 切换方向
direction: "horizontal",
// direction: "vertical",
//在slide之间设置距离（单位px）
// spaceBetween: 30,
//设置slider容器能够同时显示的slides数量(carousel模式)
// slidesPerView: 3,
// slidesPerView: "auto",
// 在carousel mode下定义slides的数量多少为一组
// slidesPerGroup: 3,
//居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。
// centeredSlides: true,
//启用后，它将使用现代CSS Scroll Snap API。它不支持Swiper的很多功能，但可能会带来更好的性能。
// cssMode: true,
//开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值
// mousewheel: true,
//设置开启键盘来控制Swiper切换。设为true时，能使用键盘的方向键控制slide切换。
// keyboard: true,
//启用自由模式功能。可设置具体参数或true来使用默认设置。默认情况下Swiper 每次滑动时只滑动一个Slide，并且会自动贴合Wrapper。开启自由模式后，Swiper 会根据惯性滑动可能不止一格且不会贴合。
// freeMode: true,
//设置网格组件的参数来启用网格功能。网格就是同一屏内Slide的多行多列布局。
// grid: {
// rows: 2,
// },
// 设置为true 时，鼠标覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状。
grabCursor: true,
// 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"card p-2s"(卡片式)、"creative"（创意性）。
// effect: "fade",
// cubeEffect: {
// shadow: true,
// slideShadows: true,
// shadowOffset: 20,
// shadowScale: 0.94,
// },
// coverflowEffect: {
// rotate: 50,
// stretch: 0,
// depth: 100,
// modifier: 1,
// slideShadows: true,
// },
// 设置为true启动自动切换，并使用默认的切换设置。
// autoplay: true,
autoplay: {
delay: 2500, //自动切换的时间间隔，单位ms,还可以在某个slide上设置单独的停留时间
//用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰(touch)，拖动，点击pagination等
disableOnInteraction: false,
},
// 设为true开启图片延迟加载默认值，使preloadImages无效。或者设置延迟加载选项。图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。
// lazy: true,
// 断点设定，允许为不同的响应断点（屏幕尺寸）设置不同的参数。类似于CSS响应式布局的media only screen and (min-width: 480px)。
// 只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween、grid.rows、slidesPerGroupSkip、direction，而像loop、effect等则无效。
// breakpoints: {
// 640: {
// slidesPerView: 2,
// spaceBetween: 20,
// },
// 768: {
// slidesPerView: 4,
// spaceBetween: 40,
// },
// 1024: {
// slidesPerView: 5,
// spaceBetween: 50,
// },
// },
//自动高度。设置为 true 时，wrapper 和container 会随着当前slide 的高度而发生变化。
// autoHeight: true,
// 开启焦距功能：双击slide会放大/缩小，并且在手机端可双指触摸缩放。可设置缩放选项或设为true使用默认值。
// zoom: true,
// 设置为 true 则开启循环(loop)模式。loop模式：会在原本slide 前后复制若干个slide (默认一个)并在合适的时候切换，让Swiper看起来像是循环的。
// loop: true, // 循环模式选项
// 在loop 模式下，将用空白slide 填充slide 数量不足的组。需要与 slidesPerGroup 一起使用。
// loopFillGroupWithBlank: true,
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
//动态分页
// dynamicBullets: true,
//分页进度条
// type: "progressbar",
//分页分数表示
// type: "fraction",
//自定义分页
// clickable: true,
// renderBullet: function (index, className) {
// return '<span class="' + className + '">' + (index + 1) + "</span>";
// },
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
//滑动前隐藏
// hide: true,
},
});
var mySwiper = new Swiper(".swiper2", {
initialSlide: 0,
direction: "vertical",
grabCursor: true,
slidesPerGroup: 7,
slidesPerView: 7,
autoplay: true,
loop: true,
pagination: {
el: ".swiper-pagination",
},
});
var mySwiper = new Swiper(".swiper3", {
initialSlide: 0,
direction: "vertical",
slidesPerView: 7,
grabCursor: true,
autoplay: true,
loop: true,
});
</script>
<script>
var chartDom1 = document.getElementById("main1");
var chartDom2 = document.getElementById("main2");
var chartDom3 = document.getElementById("main3");
var myChart1 = echarts.init(chartDom1);
var myChart2 = echarts.init(chartDom2);
var myChart3 = echarts.init(chartDom3);
var option;
option = {
backgroundColor: "transparent",
// textStyle: { color: "#fff" },
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
grid: {
left: "3%",
right: "3%",
bottom: "3%",
containLabel: true,
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#FF8000" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#FFE500" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#FFDFBF" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#C0C0EC" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#DFD9A7" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#BFB660" },
},
],
};
myChart1.setOption(option);
myChart2.setOption(option);
myChart3.setOption(option);
window.onresize = function () {
myChart1.resize();
myChart2.resize();
myChart3.resize();
};
</script>
</html>
浙公网安备 33010602011771号