Question

单击幻灯片图像分页链接（幻灯片div下方的点）时，整个分页导航行在图像转换时闪烁。我需要阻止这一点。

当我关闭jQuery smoothHeight设置时，此闪烁停止，但我需要幻灯片显示。任何帮助表示赞赏！

网站草稿：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
        });
    });

更新：添加了jQuery脚本，“当光标悬停在幻灯片上时显示标题”

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

Answer 1

您无法尝试.flexslider { overflow: visible !important}但是您必须调整父级的填充底部..

防止幻灯片图像分页链接在图像更改时闪烁

1 个答案: