JQuery 滑动条高度
JQuery Swiper slide height
我正在使用 JQuery Swiper。我基本上有一个部分,我将高度设置为视口高度。
#portfolio {
height: 100vh;
}
在此部分中,我有一个左侧和一个右侧,我将其设置为 100%
#portfolio-left {
background: #6bbea5 none repeat scroll 0 0;
height: 100%;
}
#portfolio-right {
height: 100%;
padding: 0;
}
#portfolio-left
只会容纳一点文本,而 #portfolio-right
会容纳我的滑块。
所以我已经添加了我的滑块容器,以及我想要添加到滑块的内容。然后我设置它
$(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
freeMode: true,
autoHeight: true,
grabCursor: true
});
});
它最终将是双向的,因此我有垂直和水平的原因。我垂直添加了两张幻灯片来演示我的问题。本质上,第一张幻灯片有很多内容,并且没有被赋予动态高度。我相信这与在投资组合中给予它 100% 的高度有关——对,但不太确定。我设置了一个JSFiddle来演示。
如何让幻灯片具有自动高度,同时让整个部分为 100vh?
这是我所追求的一个例子
非常感谢
伙计,考虑到 HTML 层次结构
,我重构了 CSS
看看这是否是您需要的:JSFiddle
$(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
freeMode: true,
autoHeight: true,
grabCursor: true
});
});
#portfolio {
height: 100vh;
}
#portfolio-left {
height: 100vh;
background: #6bbea5 none repeat scroll 0 0;
}
#portfolio-right {
height: 100vh;
padding: 0;
}
.swiper-container {
color: #000;
}
.swiper-wrapper {
height: 100vh;
}
.swiper-slide {
display: table;
}
.goldBG {
background: #fabc2f;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/js/swiper.jquery.min.js"></script>
<section id="portfolio">
<div class="col-lg-5 col-sm-5" id="portfolio-left">
<div id="portfolio-title">
<h2>Work</h2>
</div>
</div>
<div class="col-lg-7 col-sm-7" id="portfolio-right">
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide goldBG">
<div class="row addMargin">
<div class="col-md-5 col-md-offset-1 vertical-center inner">
<div class="content-holder-l">
<p>French</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
</div>
<div class="row addMargin">
<div class="col-md-5 col-md-offset-1 vertical-center inner">
<div class="content-holder-l">
<p>French</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
</div>
<div class="row addMargin">
<div class="col-md-5 col-md-offset-1 vertical-center inner">
<div class="content-holder-l">
<p>French</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
</div>
<div class="row addMargin">
<div class="col-md-5 col-md-offset-1 vertical-center inner">
<div class="content-holder-l">
<p>French</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
</div>
</div>
<div class="clearfix">
</div>
<div class="swiper-slide">
duyfghisdgfdshfsdygfuygdsufygsdgyudgsyfugsdyugf
<br> sdf
<br> sdfsdfsdfsd
<br> fsdfsdf sdfsdfsdf
</div>
</div>
<div class="swiper-pagination swiper-pagination-v"></div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-h"></div>
</div>
</div>
</div>
</section>
似乎 JSFiddle 在适应 Swiper 时遇到了一些麻烦。但是这里还有一个fork of your fiddle. However, It works perfectly on XAMPP server and I moved it to a live site。
$(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
freeMode: true,
autoHeight: true,
grabCursor: true,
slidesPerView: 'auto'
});
});
注意添加"slidesPerView: 'auto' "
Swiper 的最新版本
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
我正在使用 JQuery Swiper。我基本上有一个部分,我将高度设置为视口高度。
#portfolio {
height: 100vh;
}
在此部分中,我有一个左侧和一个右侧,我将其设置为 100%
#portfolio-left {
background: #6bbea5 none repeat scroll 0 0;
height: 100%;
}
#portfolio-right {
height: 100%;
padding: 0;
}
#portfolio-left
只会容纳一点文本,而 #portfolio-right
会容纳我的滑块。
所以我已经添加了我的滑块容器,以及我想要添加到滑块的内容。然后我设置它
$(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
freeMode: true,
autoHeight: true,
grabCursor: true
});
});
它最终将是双向的,因此我有垂直和水平的原因。我垂直添加了两张幻灯片来演示我的问题。本质上,第一张幻灯片有很多内容,并且没有被赋予动态高度。我相信这与在投资组合中给予它 100% 的高度有关——对,但不太确定。我设置了一个JSFiddle来演示。
如何让幻灯片具有自动高度,同时让整个部分为 100vh?
这是我所追求的一个例子
非常感谢
伙计,考虑到 HTML 层次结构
,我重构了 CSS看看这是否是您需要的:JSFiddle
$(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
freeMode: true,
autoHeight: true,
grabCursor: true
});
});
#portfolio {
height: 100vh;
}
#portfolio-left {
height: 100vh;
background: #6bbea5 none repeat scroll 0 0;
}
#portfolio-right {
height: 100vh;
padding: 0;
}
.swiper-container {
color: #000;
}
.swiper-wrapper {
height: 100vh;
}
.swiper-slide {
display: table;
}
.goldBG {
background: #fabc2f;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/js/swiper.jquery.min.js"></script>
<section id="portfolio">
<div class="col-lg-5 col-sm-5" id="portfolio-left">
<div id="portfolio-title">
<h2>Work</h2>
</div>
</div>
<div class="col-lg-7 col-sm-7" id="portfolio-right">
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide goldBG">
<div class="row addMargin">
<div class="col-md-5 col-md-offset-1 vertical-center inner">
<div class="content-holder-l">
<p>French</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
</div>
<div class="row addMargin">
<div class="col-md-5 col-md-offset-1 vertical-center inner">
<div class="content-holder-l">
<p>French</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
</div>
<div class="row addMargin">
<div class="col-md-5 col-md-offset-1 vertical-center inner">
<div class="content-holder-l">
<p>French</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
</div>
<div class="row addMargin">
<div class="col-md-5 col-md-offset-1 vertical-center inner">
<div class="content-holder-l">
<p>French</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</div>
</div>
</div>
</div>
<div class="clearfix">
</div>
<div class="swiper-slide">
duyfghisdgfdshfsdygfuygdsufygsdgyudgsyfugsdyugf
<br> sdf
<br> sdfsdfsdfsd
<br> fsdfsdf sdfsdfsdf
</div>
</div>
<div class="swiper-pagination swiper-pagination-v"></div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-h"></div>
</div>
</div>
</div>
</section>
似乎 JSFiddle 在适应 Swiper 时遇到了一些麻烦。但是这里还有一个fork of your fiddle. However, It works perfectly on XAMPP server and I moved it to a live site。
$(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
freeMode: true,
autoHeight: true,
grabCursor: true,
slidesPerView: 'auto'
});
});
注意添加"slidesPerView: 'auto' "
Swiper 的最新版本
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>