admin管理员组文章数量:1323714
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>
Share
Improve this question
asked Oct 10, 2014 at 14:01
lbollulbollu
771 gold badge2 silver badges14 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
1 Answer
Reset to default 5Add
overflow: hidden
to
#slider
本文标签: javascriptFlexSlider Auto Height still leaving a space below sliderStack Overflow
版权声明:本文标题:javascript - FlexSlider Auto Height still leaving a space below slider - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742127413a2422003.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论