在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
这个特效样式会自动把swiper-wrapper缩小一点并加上阴影，配置里面好像只能去掉阴影，并不能恢复大小，这样就不能满屏了，请问有办法设置这个swiper-wrapper不缩小吗？
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。查看: 349|回复: 1
请问切换效果cube，怎么做到全屏
TA的每日心情奋斗 17:16签到天数: 1 天[LV.1]初来乍到主题帖子积分
新手上路, 积分 25, 距离下一级还需 25 积分
新手上路, 积分 25, 距离下一级还需 25 积分
请问切换效果cube，怎么做到全屏
我要做竖向切换，用这个不能全屏，大多数效果都做不到了，求问，怎么改，谢谢
aab.jpg (11.89 KB, 下载次数: 0)
17:14 上传
效果如上图，背景为绿色，内容为紫色，我想让内容全屏，请问该如何操作，谢谢
该用户从未签到主题帖子积分
新手上路, 积分 12, 距离下一级还需 38 积分
新手上路, 积分 12, 距离下一级还需 38 积分
你在手机上运行就全屏了
Powered byjavascript - idangerous swiper issue with dynamic content - Stack Overflow
Join Stack Overflow to learn, share knowledge, and build your career.
or sign in with
I am applying the idangerous swiper scrollbar plugin on a container whose content is dynamically loaded with ajax, I initialize the plugin after the ajax call, the issue is that the scroll doesn't work until I resize the browser. I have tested it with static content it's working fine, no need to resize the window but once I switch to dynamic content, the scroll won't work unit I resize the browser.
Here's how am initializing the plugin
var mySwiper = new Swiper('.swiper-container', {
scrollContainer: true,
mousewheelControl: true,
mode: 'vertical',
scrollbar: {
container: '.swiper-scrollbar',
hide: true,
draggable: false
here's the html
&div class="swiper-container"&
&div class="swiper-wrapper"&
&div class="swiper-slide"&
&div class="searchList"&
//here's the dynamic content being loaded (a list of div elements)
&div class="swiper-scrollbar"&
swiper-container height is 100%
I found the solution, I added this function which I call after first initializing the plugin
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
This fix was mentioned in another plugin and when I tried it with this swiper plugin it worked. It has something to do with the plugin not aware of the change that occurred to the DOM.
10.4k3296174
I've got a no-JS solution.
&div class="responsive-swiper-holder"&
&div class="responsive-swiper-shiv"&&/div&
&div class="swiper-container"&
&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&&!-- .swiper-container --&
&/div&&!-- .responsive-swiper-holder --&
.responsive-swiper-holder {
.responsive-swiper-shiv {
padding-top: 31.25%;
.swiper-container {
height: 100%;
width: 100%;
.swiper-wrapper, .swiper-slide {
height: 100%;
Consequently this method will also work for making any div size responsively the way an image would. Scaling it's height with a locked aspect ratio of it's width.
The magic is that browsers treat margin/padding % values as a percentage of the width of the element even if you are padding the top or bottom of said element.
Hope this helps!
My fix for Swiper 3.x (I believe the above covers 2.x)
function fixSwiperForIE(swiper) {
setTimeout(function () {
swiper.onResize();
3,46521413
Updated for Change in Swiper documentation since .reInit is no longer a function.
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.update();
I just wanted to add that I also had trouble getting Swiper to work with dynamically loaded content through ajax. This is quite obviously because the content wasn't loaded yet when Swiper was intiated. I solved this by using swiper's own appending function instead of my own. This was on version 3.3.1, and it fixed it for me without needing to use setTimeout() or anything!
//quick and dirty creation of html to append
var imgHTML = "";
$.each(imgArray, function (i, url) {
imgHTML += '&div class="swiper-slide"&&img src="' + url + '" alt=""/&&/div&';
//initiate swiper
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
loop: true,
autoHeight: true
mySwiper.appendSlide(imgHTML); //append the images
mySwiper.update(); //update swiper so it redoes the bindings
I hope this helps some people in need!
swiper 3.4.2
&div class="swiper-container"&
&div class="swiper-wrapper" style="height: auto"&
&div class="swiper-slide"&&img src="" width="100%"&&/div&
&div class="swiper-slide"&&img src="" width="100%"&&/div&
&div class="swiper-slide"&&img src="" width="100%"&&/div&
&div class="swiper-slide"&&img src="" width="100%"&&/div&
&div class="swiper-slide"&&img src="" width="100%"&&/div&
&div class="swiper-pagination"&&/div&
.swiper-container {
width: 100%;
.swiper-slide {
text-align:
font-size: 18
background: #
/* Center slide text vertically */
display: -webkit-
display: -ms-
display: -webkit-
-webkit-box-pack:
-ms-flex-pack:
-webkit-justify-content:
justify-content:
-webkit-box-align:
-ms-flex-align:
-webkit-align-items:
align-items:
.swiper-pagination-bullet {
height: 10
text-align:
line-height: 10
font-size: 12
color:#000;
opacity: 1;
background: rgba(255, 255, 255, 0.2);
.swiper-pagination-bullet-active {
background: #000000;
javascript
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true,
autoHeight: true
For responsive design i call the following method resizeFix
function reinitSwiper(swiper) {
swiper.resizeFix(true)
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Upcoming Events
ends Mar 27
Stack Overflow works best with JavaScript enabled}