jQuery Swiper 滑动高度答案

【问题标题】：JQuery Swiper slide heightjQuery Swiper 滑动高度
【发布时间】：2016-12-14 22:49:25
【问题描述】：

我正在使用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 部分？

这是我所追求的一个例子

非常感谢

【问题讨论】：

autoHeight 选项用于滑块容器本身，而不是单个幻灯片。让滑块按你想要的方式工作可能会更容易，用小提琴向我们展示，然后我们就可以弄清楚如何让它伸展到视口的整个高度。
嗨，我在原始帖子中添加了一个 JSFiddle。我想做的是让每张幻灯片都有一个自动高度，这样它就可以包含它的所有内容
我知道答案，并且已经为第一张幻灯片工作了。虽然每张幻灯片的结构都有点复杂，但我无法完全修复小提琴。当您使用height:100% 时，它采用父元素的高度。但是如果父元素上没有设置高度，它将找不到要使用的高度。您需要一直添加height:100% 直到包装器，以便包装器的高度可以向下过滤。看看here，让我知道它是否朝着正确的方向前进。
你想要达到什么目的？
你能显示你想要什么样的输出

标签： jquery css jquery-plugins swiper

【解决方案1】：

似乎 JSFiddle 可能在适应 Swiper 时遇到了一些麻烦。但这里是fork of your fiddle。但是，它在 XAMPP 服务器上完美运行，我也将其移至 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>

【讨论】：

不完全是我所追求的，我在 OP 中添加了一张图片以尝试进一步解释。所以左边部分是100vh。右侧部分也是 100vh。但是，在右侧部分，我有一个滑块。此滑块容器应为 100%，但其中的幻灯片应具有自动高度以适合其内容。如果您查看滑块页面上的示例，我使用的是嵌套示例。
抱歉耽搁了，非常感谢您的回复。我已经尝试复制您在这里所做的kingandtuke.com/emm/test.html，但似乎遇到了问题。它似乎不适用于自动高度。你有没有注意到我似乎在做不同的事情？谢谢
@kate_hudson 我不知道是否需要使用“@person”在 cmets 中通知他们。但我想我已经弄清楚了。将您的 cdn 链接更新到最新版本。我将链接添加到我的答案中。
不知道名称标记 :-) 非常感谢您提供的所有帮助，更新库是一种享受。非常感谢。出于某种原因，它自动发放了赏金，将尝试对其进行更改:-)
@kate_hudson 赏金没什么大不了的。乐意效劳。我学到了一些我以前从未见过的东西?

【解决方案2】：

伙计，考虑到 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>

【讨论】：

您展示的fiddle似乎有无限滚动，幻灯片不适合内容。我已将图像添加到 OP 以尝试演示。如果您查看滑块主页上的示例，我使用的是嵌套滑块。谢谢