FlexSlider Auto Height 仍然在滑块下方留有空间

FlexSlider Auto Height still leaving a space below slider(FlexSlider Auto Height 仍然在滑块下方留有空间)

问题描述

我的 flexslider 上有自动高度，但它下方仍然留有空间.

I have auto height on my flexslider and its still leaving a space below it.

我为滑块应用了背景颜色，它使用自动高度并上下移动，但似乎滑块正在拍摄最大的照片并将滑块保持在该高度.

I have applied a background colour to the slider and it is using auto height and moving up and down but it seems like the slider is taking the biggest photo and keeping the slider at that height.

任何帮助都会很棒！

您可以在此处查看该页面:http://therichmondhillgallery.com/index.php/shows/bruce-yardley/

You can see the page live here: http://therichmondhillgallery.com/index.php/shows/bruce-yardley/

This is my html:
<div id="carousel" class="flexslider">
<ul class="slides">
<li class="slide">
<img src="<?php echo $thumb_image; ?>" />
</li>
</ul>
</div>

<div id="slider" class="flexslider">
  <ul class="slides">
    <li class="slide">
       <img class="slidermainimg" src="<?php echo $main_image; ?>" />
    </li>
  </ul>
</div>

这是我的 CSS:

/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face {
    font-family: 'flexslider-icon';
    src:url('../fonts/flexslider-icon.eot');
    src:url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/flexslider-icon.woff') format('woff'),
        url('../fonts/flexslider-icon.ttf') format('truetype'),
        url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; margin-right:10px;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 30px; position: relative; zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px;}

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 30px; margin: -20px 0 0; position: absolute; top: 55%; z-index: 10; overflow: hidden; opacity: 0.6; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: 10px; display: block;}
.flex-direction-nav .flex-next { right: 10px; text-align: right; display: block;}
.flexslider:hover .flex-prev { opacity: 1; left: 10px;}
.flexslider:hover .flex-next { opacity: 1; right: 10px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 30px; display: inline-block; content: 'f001'; color:#ffffff; }
.flex-direction-nav a.flex-next:before  { content: 'f002'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

#slider {background-color:#ff6600; margin-bottom:0px;}

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

这是我的 javascript:

And this is my javascript:

<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

            <script type="text/javascript">
            $(window).load(function() {
              $('#carousel').flexslider({
                animation: "slide",
            animationLoop: true,
            itemWidth: 200,
            itemMargin: 10,
            minItems: 5,
            move: 5,
            controlNav: false,
                asNavFor: '#slider'
              });

              $('#slider').flexslider({
                animation: "fade",
                controlNav: false,
                animationLoop: true,
                slideshow: false,
                smoothHeight: true,
            slideshowSpeed: 20000,
            directionNav: false,
                sync: "#carousel"
              });
            });
        </script>

推荐答案

添加

overflow: hidden

到

#slider

这篇关于FlexSlider Auto Height 仍然在滑块下方留有空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！