Prevent slideshow image paging links from blinking when image changes

Question

When a slideshow image paging link is clicked (dots beneath slideshow div) the whole paging navigation row blinks while images transition. I need to prevent this.

This blinking stops when I turn off the jQuery smoothHeight setting, but I need that for the slideshow. Any help is appreciated!

Site draft: http://parkerrichard.com/studiogreen/html/residential/project-01.html

HTML:

        <!-- slideshow gallery -->          
        <div class="col-lg-8 col-md-8 col-sm-7 pull-left">
            <div class="flexslider">
                <ul class="slides" id="slideshow" ondragstart="return false;">
                    <li>
                        <div class="show-caption">
                            <img src="../img/arrow-right.png" class="img-responsive">
                        </div>
                        <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">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>
        </div><!--/slideshow row -->

CSS:

.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;
}

.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;
    display: visible !important;
}

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

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

jQuery

$(window).load(function() {
    $('.flexslider').flexslider({
    animation: "fade",
    slideshow: false,
    smoothHeight: true
        });
    });

UPDATE: Added jQuery Script for "caption appears when cursor hovers over slideshow"

$( "#slideshow" ).hover(function() {
    $( ".flex-caption" ).fadeToggle( "slow", "linear" );
    });

Answer 1

You can't try .flexslider { overflow: visible !important} but then you will have to adjust the padding bottom of the parent..