代码重置横幅的高度并与滑块下方的内容重叠

Question

以下是我的滑块的链接。 https://nawishta.com/

在滑块的正下方，有一张图片。在每次滑动移动时，滑块下方的图像会突然上升然后下降。如何让它像平常一样冻结？

由于这个滑块的 wordpress 插件无法正常工作，所以我手动将高度调整放入 CSS 中，如下所示：

.soliloquy-slider, .soliloquy-slides, .soliloquy-wrap, .soliloquy-clear {
    height: 600px !important;
    width: 100% !important;
}


.soliloquy-item, .soliloquy-item-1, .soliloquy-id-352, .soliloquy-image-slide {
    height: 600px !important;
}

如果我没有在 CSS 中强制使用 600px，滑块会裁剪图像并且看起来很糟糕，所以这是必要的。页面上提供了滑块的代码。我还在此处附上了它的 html 代码，但在页面 (PAGE LINK) 上更容易看到：

<div class="soliloquy-outer-container" data-soliloquy-loaded="1"><div aria-live="polite" id="soliloquy-container-351" class="soliloquy-container soliloquy-transition-fade soliloquy-fade soliloquy-controls-active soliloquy-arrows-active  soliloquy-theme-base" style="max-width: 960px; max-height: 300px; margin: 0px auto 20px; height: auto; opacity: 1; background-image: none;"><div class="soliloquy-wrapper" style="max-width: 100%;"><div class="soliloquy-viewport" style="width: 100%; position: relative; height: 600px;"><ul id="soliloquy-351" class="soliloquy-slider soliloquy-slides soliloquy-wrap soliloquy-clear" style="width: auto; position: relative;"><li aria-hidden="false" class="soliloquy-item soliloquy-item-1 soliloquy-id-352 soliloquy-image-slide soliloquy-active-slide" draggable="false" style="list-style: none; float: left; position: relative; width: 100%; z-index: 50; display: block; margin-right: -100%;"><code id="soliloquy-slug-shortcode" class="soliloquy-code"><img id="soliloquy-image-352" class="soliloquy-image soliloquy-image-1" src="https://nawishta.com/wp-content/uploads/2020/05/552e46dc-e97a-40c6-885c-2541caf8d0fd.jpg" alt="552e46dc-e97a-40c6-885c-2541caf8d0fd"></code></li><li aria-hidden="true" class="soliloquy-item soliloquy-item-2 soliloquy-id-353 soliloquy-image-slide" draggable="false" style="list-style: none; float: left; position: relative; width: 100%; z-index: 0; margin-right: -100%; display: none;"><code id="soliloquy-slug-shortcode" class="soliloquy-code"><img id="soliloquy-image-353" class="soliloquy-image soliloquy-image-2 soliloquy-preload" src="https://nawishta.com/wp-content/uploads/2020/05/576b9a8e-2916-4046-adf9-57707bbad648.jpg" alt="576b9a8e-2916-4046-adf9-57707bbad648"></code></li><li aria-hidden="true" class="soliloquy-item soliloquy-item-3 soliloquy-id-354 soliloquy-image-slide" draggable="false" style="list-style: none; float: left; position: relative; width: 100%; z-index: 0; margin-right: -100%; display: none;"><code id="soliloquy-slug-shortcode" class="soliloquy-code"><img id="soliloquy-image-354" class="soliloquy-image soliloquy-image-3 soliloquy-preload" src="https://nawishta.com/wp-content/uploads/2020/05/2d75e297-802b-4793-be56-4ce8c605eedc.jpg" alt="2d75e297-802b-4793-be56-4ce8c605eedc"></code></li><li aria-hidden="true" class="soliloquy-item soliloquy-item-4 soliloquy-id-355 soliloquy-image-slide" draggable="false" style="list-style: none; float: left; position: relative; width: 100%; z-index: 0; margin-right: -100%; display: none;"><code id="soliloquy-slug-shortcode" class="soliloquy-code"><img id="soliloquy-image-355" class="soliloquy-image soliloquy-image-4 soliloquy-preload" src="https://nawishta.com/wp-content/uploads/2020/05/f9b56abd-95be-4af7-a15c-b2989a687e85.jpg" alt="f9b56abd-95be-4af7-a15c-b2989a687e85"></code></li><li aria-hidden="true" class="soliloquy-item soliloquy-item-5 soliloquy-id-356 soliloquy-image-slide" draggable="false" style="list-style: none; float: left; position: relative; width: 100%; z-index: 0; margin-right: -100%; display: none;"><code id="soliloquy-slug-shortcode" class="soliloquy-code"><img id="soliloquy-image-356" class="soliloquy-image soliloquy-image-5 soliloquy-preload" src="https://nawishta.com/wp-content/uploads/2020/05/0c9533f7-fe4b-4b0b-9509-1ed2a219d40f.jpg" alt="0c9533f7-fe4b-4b0b-9509-1ed2a219d40f"></code></li></ul></div><div class="soliloquy-controls soliloquy-has-pager soliloquy-has-controls-direction" style="opacity: 1;"><div class="soliloquy-pager soliloquy-default-pager"><div class="soliloquy-pager-item"><a href="" data-slide-index="0" class="soliloquy-pager-link active" tabindex="0"><span>1</span></a></div><div class="soliloquy-pager-item"><a href="" data-slide-index="1" class="soliloquy-pager-link" tabindex="0"><span>2</span></a></div><div class="soliloquy-pager-item"><a href="" data-slide-index="2" class="soliloquy-pager-link" tabindex="0"><span>3</span></a></div><div class="soliloquy-pager-item"><a href="" data-slide-index="3" class="soliloquy-pager-link" tabindex="0"><span>4</span></a></div><div class="soliloquy-pager-item"><a href="" data-slide-index="4" class="soliloquy-pager-link" tabindex="0"><span>5</span></a></div></div><div class="soliloquy-controls-direction" aria-label="carousel buttons" aria-controls="soliloquy-container-351"><a class="soliloquy-prev" href="" tabindex="0" aria-label="previous"><span></span></a><a class="soliloquy-next" href="" tabindex="0" aria-label="next"><span></span></a></div></div></div></div><noscript><style type="text/css" scoped>#soliloquy-container-351{opacity:1}#soliloquy-container-351 li > .soliloquy-caption{display:none}#soliloquy-container-351 li:first-child > .soliloquy-caption{display:block}</style><div class="soliloquy-no-js" style="display:none;visibility:hidden;height:0;line-height:0;opacity:0;"><img class="soliloquy-image soliloquy-no-js-image" src="https://nawishta.com/wp-content/uploads/2020/05/552e46dc-e97a-40c6-885c-2541caf8d0fd.jpg" alt="552e46dc-e97a-40c6-885c-2541caf8d0fd" /><img class="soliloquy-image soliloquy-no-js-image" src="https://nawishta.com/wp-content/uploads/2020/05/576b9a8e-2916-4046-adf9-57707bbad648.jpg" alt="576b9a8e-2916-4046-adf9-57707bbad648" /><img class="soliloquy-image soliloquy-no-js-image" src="https://nawishta.com/wp-content/uploads/2020/05/2d75e297-802b-4793-be56-4ce8c605eedc.jpg" alt="2d75e297-802b-4793-be56-4ce8c605eedc" /><img class="soliloquy-image soliloquy-no-js-image" src="https://nawishta.com/wp-content/uploads/2020/05/f9b56abd-95be-4af7-a15c-b2989a687e85.jpg" alt="f9b56abd-95be-4af7-a15c-b2989a687e85" /><img class="soliloquy-image soliloquy-no-js-image" src="https://nawishta.com/wp-content/uploads/2020/05/0c9533f7-fe4b-4b0b-9509-1ed2a219d40f.jpg" alt="0c9533f7-fe4b-4b0b-9509-1ed2a219d40f" /></div></noscript></div> 

当下一张幻灯片图像加载到滑块中时，需要使图像不会自动出现以供瞥见。

Answer 1

您的滑块将overflow: hidden 添加到使position: relative 无用的类中。你需要给你的父类一个最小高度，所以当滑块高度折叠时它不会改变它的高度。

这应该可行。

.soliloquy-outer-container {
   min-height: 600px;
}

Answer 2

您应该将此添加到您希望在 CSS 中使用 600 像素的内容列表中。

.soliloquy-theme-base{
  max-height: 600px !important;
}