jQuery 幻灯片最初处于活动状态

Question

我有一个标题，它使用 jQuery 幻灯片在单击图像时从视图中消失。

我正在尝试使标题 "slide" 切换最初处于活动状态（隐藏），然后在单击图像后显示它，从右侧（而不是从底部）滑入。感谢您的帮助！

jQuery:

    $("#slideshow").click(function() {
      $( ".flex-caption" ).toggle( "slide" );
    });

JSFiddle：http://jsfiddle.net/tyuth1sr/1/

Answer 1

您可以通过尝试将标题的绝对高度设置为 !important 来解决问题。这样 jQuery 滑动功能将无法改变高度，使其看起来像是从右边来的。

见http://jsfiddle.net/tyuth1sr/11/

我不得不改变一些类，高度将很难做出响应 imo。这是我更改的代码：

.bottom {
    bottom: 0;
    margin-bottom: 0px;
    position:absolute;
}

.flex-caption {
    position: absolute;
    text-align: left;
    background:rgba(255, 255, 255, 0.7);
    z-index: 1;
    padding: 20px;
    width: 295px;
    padding-top: 100%;
    bottom: 20px;
    right:0;
    height:650px !important; /* should be set to height of container - 40 for padding */
}

 <div class="flex-caption ">
    <div class="caption-content bottom">
        <p>Taectur sinti consed magnimp oreptatem que est essi cuptus doluptate pratis rero omni con fugitatius venienimus. Xim fuga. Iliqui omnim comnimus estiorrum cum et accus et liquia nos.</p>
    </div>
</div>

您可以给 parent (.flex-slider) 一个 box-sizing:border-box;然后给 flex-caption 一个 100% 的高度 !important;

Answer 2

.flex-caption {
    ...
    padding-bottom: 100%;
    top: 0px;
    display: none;
}

Demo

jQuery 幻灯片最初处于活动状态

jQuery slide initially active

jquery

caption

flexslider