Javascript 如何在Swiper.js中获得多选项卡视图效果？
我正在使用swiper.js JavaScript库 这个图像 图像链接 基本上概括了我想要在HTML文件中包含的所有内容 我只想添加标签命名“标签名称”和“X”关闭按钮 在标签的顶部 *选项卡它就像覆盖流，但垂直 这是我的代码：Javascript 如何在Swiper.js中获得多选项卡视图效果？,javascript,jquery,html,swiper,Javascript,Jquery,Html,Swiper,我正在使用swiper.js JavaScript库 这个图像 图像链接 基本上概括了我想要在HTML文件中包含的所有内容 我只想添加标签命名“标签名称”和“X”关闭按钮 在标签的顶部 *选项卡它就像覆盖流，但垂直 这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
width:100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 90%;
max-width: 400px;
max-height:600px;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000s;
-webkit-perspective-origin: 100% 30%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<h1 "> Swipe Vertically in coverflow </h1>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/10)"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
effect: 'coverflow' ,
grabCursor: true,
centeredSlides: true,
direction: 'vertical',
mousewheelControl: true,
slidesPerView: 'auto',
coverflow: {
rotate: 10,
stretch: 0,
depth: 100,
modifier: 6,
slideShadows : true
}
});
</script>
</body>
</html>
Swiper演示
html，正文{
位置：相对位置；
身高：100%；
宽度：100%；
}
身体{
背景：#eee；
字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体；
字体大小：14px；
颜色：#000；
保证金：0；
填充：0；
}
.swiper容器{
宽度：100%；
身高：90%；
最大宽度：400px；
最大高度：600px；
-webkit变换样式：保留-3d；
-webkit透视图：1000秒；
-webkit透视图来源：100%30%；
}
.滑梯{
文本对齐：居中；
字号：18px；
背景：#fff；
/*将幻灯片文本垂直居中*/
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
}
你对我有问题，不要告诉我你是否已经解决了这个问题你对我有问题，不要告诉我你是否已经解决了这个问题