Question

默认情况下，Flexslider应根据显示的当前图像的高度调整其视口高度。在我的网站上，Flexslider固定在幻灯片放映中最大图像的高度，使所有较短的图像在其下方留下空白空白。我是否正在做一些事情来覆盖Flexslider的响应高度功能？有什么方法可以解决这个问题吗？

实时草稿：http://parkerrichard.com/freelance/studiogreen/residential/project-01.html

HTML：

                <div class="flexslider">
                    <div class="arrows">
                        <img src="../img/arrow-left.png" class="arrow-left pull-left">
                        <img src="../img/arrow-right.png" class="arrow-right pull-right">
                    </div>
                    <ul class="slides" id="slideshow" ondragstart="return false;">
                        <li>
                            <img src="../img/residential/project-01/img-01.jpg" />
                            <div class="flex-caption right hidden-xs">
                                <div class="caption-content">
                                    <p><span class="hcaption">PROJECT <span class="sm-spaced">1</span></span><br /></p>
                                    <br />
                                    Location: <span class="lite">Los Altos Hills, California</span><br />
                                    Architect: <span class="lite">SDG Architects</span><br />
                                    <br />
                                    <p class="hcap">Earth-tone stone and concrete terraces <br />create Zen-like spaces around this home. <br />California outdoor living is experienced <br />in 'rooms', which include a pool and spa, <br />water feature wall with Buddha sculpture, <br />stone and gas fire pit, and outdoor kitchen <br />and dining pavilion. Each feature is set <br />against a backdrop of ornamental grasses, <br />perennials, and mature specimen trees.</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-02.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-03.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-04.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-05.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-06.jpg" />
                        </li>
                        <li>
                            <img src="../img/residential/project-01/img-07.jpg" />
                        </li>
                    </ul>
                </div>

CSS：

/*
 * flexslider styling 
 */

.flexslider {
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}

.slides {
    overflow: hidden !important;
}

.slides div .flex-caption {
    overflow: scroll !important;
}

.slides li img {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

.flex-direction-nav a  {
    color: #999 !important;
}

.flex-next {
    padding-right: 30px !important;
}

.arrows {
    position: absolute;
    z-index: 90;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.arrow-left {
    padding-left: 15px;
    opacity: 0;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

.arrow-right {
    padding-right: 20px;
    opacity: 0;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

.flexslider:hover .arrow-right, .flexslider:hover .arrow-left {
    opacity: 0.8;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

.flexslider:hover .flex-prev, .flexslider:hover .flex-next, .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
    opacity: 0 !important; 
    z-index: 100;
}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 0 !important;}
  .flex-direction-nav .flex-next { opacity: 0 !important;}
  .arrow-right, .arrow-left { opacity: 1}
}

.flex-control-nav {
    text-align: right !important;
    padding-right: 0px !important;
}

.flex-control-paging li {
    margin: 0 0px 0 12px !important;
}

.flex-control-paging li a {
    color: transparent !important;
}

.nodot .flex-control-paging li a { 
    display: none !important;
}

.flex-control-paging li a.flex-active {
    background: #6dab3e !important;
}


/*
 * flexslider caption styling 
 */

.flex-caption {
    position: absolute;
    text-align: left;
    font-size: 11px;
    background:rgba(255, 255, 255, 0.7);
    z-index: 100;
    padding: 20px 10px 35px 30px;
    width: 287px;
    padding-top: 100%;
    bottom: 0px;
    display: none;
    color: #000;
}

.caption-expand {
    padding-right: 0px !important;
    padding-left: 20px !important;
}

.right {
    right: 0;
    margin-bottom: 0px;
}

.show-caption {
    position: absolute;
    top: 48%;
    right: 240px;
    z-index: 99;
    opacity: 0.75;
    filter: alpha(opacity=75); /* For IE8 and earlier */
    pointer-events: none;
    display: none;
}

.hcaption {
    font-size: 13px;
    text-transform: uppercase;
}

.hcap {
    margin-top: -7px;
}

.flex-caption p {
    margin-bottom: -8px;
}

Answer 1

当你在javascript中启动时，flexslider会应用属性：

smoothHeight：true

示例：

$('.flexslider').flexslider({
    animation: "slide",
    smoothHeight: true
});

在幻灯片中查看较短图像时，Flexslider视口不会调整高度

1 个答案: