javascript - FlexSlider Auto Height still leaving a space below slider - Stack Overflow

admin管理员组

文章数量:1324823

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.

Any help would be great!

You can see the page live here: .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>

This is my 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: "\0020"; 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;}
}

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>

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.

Any help would be great!

You can see the page live here: http://therichmondhillgallery./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>

This is my 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: "\0020"; 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;}
}

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>

• javascript
• html
• css
• slider
• flexslider

Share Improve this question Follow asked Oct 10, 2014 at 14:01 lbollulbollu 7711 gold badge22 silver badges1414 bronze badges 4

• In Chrome Dev Tool it's giving an error on the flexslider.css (file not found) try making sure its path is correct and perhaps that might fix it? – Victor Commented Oct 10, 2014 at 14:37
• Hi Victor I have looked into that, That is just a line of code I forgot to take out when converting the site to a Wordpress theme, I have removed it and its still the same... It does seem to auto height when the page first loads but then it pops back to the height of the tallest image.. – lbollu Commented Oct 10, 2014 at 14:49
• If you add overflow: hidden to#slider its fixes it but you shouldn't need to do that. I'd personally re-install the slider plugin. – Victor Commented Oct 10, 2014 at 15:07
• Added as an answer - could you accept, ta! – Victor Commented Oct 10, 2014 at 15:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Add

overflow: hidden

to

#slider

本文标签： javascriptFlexSlider Auto Height still leaving a space below sliderStack Overflow