html - Flexslider viewport won't resize height when viewing shorter image in slideshow -
by default flexslider supposed resize viewport height according height of current image being displayed. on site flexslider fixed @ height of largest image in slideshow, leaving shorter images blank white space beneath them. doing override responsive height function of flexslider? there way fix this?
live draft: http://parkerrichard.com/studiogreen/html/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 , concrete terraces <br />create zen-like spaces around home. <br />california outdoor living experienced <br />in 'rooms', include pool , spa, <br />water feature wall buddha sculpture, <br />stone , gas fire pit, , outdoor kitchen <br />and dining pavilion. each feature set <br />against backdrop of ornamental grasses, <br />perennials, , 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 { 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 , (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 { color: transparent !important; } .nodot .flex-control-paging li { 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); /* ie8 , earlier */ pointer-events: none; display: none; } .hcaption { font-size: 13px; text-transform: uppercase; } .hcap { margin-top: -7px; } .flex-caption p { margin-bottom: -8px; }
when initiate in javascript flexslider apply property:
smoothheight: true
example:
$('.flexslider').flexslider({ animation: "slide", smoothheight: true });
Comments
Post a Comment