嗨，我想创建一个包含 4 篇文章（4 条电影评论）的滑块，一切正常，但有一件事：当我加载网页时，第一次渲染很糟糕。我的意思是，它将所有图像和数据加载到元素上，并且由于“最大内容”数据宽度，我看到的元素比第一个子元素长。看这里
但是在我使用 prev 或 after 按钮单击所有 4 个孩子之后，我可以正确看到它，所以问题出在第一个循环上。像HERE - 现在，我看不到其他孩子的标题和副标题。
可能是什么问题？
HTML：
<blh:head_required />
<blh:body_required />
<div id="page-wrapper" class="container {blh:post_inside hyphen="1"}">
<!-- HEADER -->
<header class="coffee_row">
<div class="coffee_header">
<div class="coffee_header_headline">
<center><a href="https://smokingbarrels.blog.hu/"><img src="http://m.blog.hu/sm/smokingbarrels/skins/sb2019/img/smokingb_title3.png" /></center></a>
<h3><blh:blog_tagline /></h3>
</div>
</div>
<div class="nav_mobile_menu_icon">
<span id="mobile_nav_btn">
</span>
</div>
<div class="coffee_header_line"></div>
<div class="coffee_header_nav">
<blh:menu />
<hr>
<p></p>
<blhc:if key="pageType" value="blogcimlap" operator="eq">
<blh:starred width="980" height="450" limit="4" bjqs_showcontrols="true" bjqs_showmarkers="false" bjqs_centermarkers="false" article-subtitle="true" />
<center>⬤ ⬤ ⬤</center>
</blhc:if>
<p></p>
</div>
</header>
<!-- /HEADER -->
<!-- CONTENT SIDE -->
<section id="content-side">
<div class="coffee_content_side coffee_row">
<blhc:postloop>
<article id="{blh:post_slug}" class="post post_{blh:post_ogg cols="1"} {blh:post_visibility} {blh:post_dtype} {blh:post_increment} coffee_article
{blhc:if key="pageType" value="post" operator="ne"}coverpage{/blhc:if}
{blhc:if key="pageType" value="post" operator="eq"}postpage {/blhc:if} " lang="{blh:post_lang}">
<div class="coffee_post_content">
<blhc:if key="pageType" value="post" operator="ne">
<div class="coffee_post_img">
<a href="{blh:post_permalink}">
<blh:post_first_img width="310" height="auto" resize="0" />
</a>
</div>
</blhc:if>
<div class="coffee_post_container">
<div class="coffee_post_title">
<a href="{blh:post_permalink}">
<blh:post_title/>
</a>
</div>
<blhc:if key="pageType" value="blogcimlap" operator="ne">
<div class="coffee_post_subtitle">
<blh:post_subtitle/>
</div>
</blhc:if>
<div class="coffee_post_meta">
By:
<span class="author"><blh:post_author /></span>
<span class="date"><blh:post_date format="Y. M d."/></span>
<span class="edit"><blh:post_edit/></span>
</div>
<div class="coffee_post_entry">
<blh:post_content length="500" cutoff="..." />
</div>
<div class="share">
<blh:share />
</div>
<blhc:if key="pageType" value="post" operator="eq">
<blh:post_trbrdf/>
<blh:post_feedback/>
</blhc:if>
</div>
</div>
</article>
</blhc:postloop>
<!-- pager -->
<div class="coffee_pager_wrap">
<div class="coffee_pager">
<blh:pager prelabel="előző oldal" nxtlabel="következő oldal" />
</div>
</div>
<div class="coffee_widget_wrap">
<div id="<blhc:if key="pageType" value="post" operator="ne">coffee_widgets</blhc:if>"
class="coffee_widgets <blhc:if key="pageType" value="post" operator="ne">coverpage</blhc:if>
<blhc:if key="pageType" value="post" operator="eq">postpage</blhc:if> ">
<blh:social />
<blh:rightboxes />
</div>
</div>
</div>
</section>
<!-- /CONTENT SIDE -->
</div>
<!-- /PAGE WRAPPER -->
<!-- FOOTER -->
<footer></footer>
<!-- /FOOTER -->
<script src="https://m.blog.hu/skins/novo_art/scripts/main.js"></script>
<script src="https://m.blog.hu/skins/coffee/js/jquery_dotdotdot_min.js?v=20180914"></script>
<script src="https://m.blog.hu/skins/coffee/js/coffee_handler.js?v=20180914"></script>
CSS：
#slider {
background: #b00538;
width: 1050px;
height: 400px;
margin: 0 0 20px;
padding: 0px;
border-radius: 0px;
}
#slider:hover .article-data {
height: auto;
overflow: visible;
}
#slider:hover img {
color: white;
opacity: 0.7;
}
#slider .article-infos,
#slider .lead {
display: none;
}
#slider .bjqs {
display: block;
position: relative;
width: 1050px;
height: 400px;
overflow: hidden;
margin: 0;
padding: 0;
}
#slider .bjqs li {
display: block;
position: absolute;
background-color: #b00538;
top: 0;
left: 0;
width: 770px;
height: 410px;
}
#slider .article-image {
display: block;
background: #0f0f22;
position: relative;
width: 1023px;
height: 450px;
}
#slider img {
position: absolute;
bottom: 0;
height: auto;
left: 0;
margin: auto;
right: 0;
top: 0;
width: auto
transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
}
#slider .article-data {
background: transparent;
position: relative;
bottom: 135px;
left: 0px;
font-size: 30px;
padding: 0;
width: auto;
overflow: hidden;
height: auto;
}
#slider .article-data h1 {
padding: 1px 15px 15px;
background: #b00538;
color: white;
font-size: 15px;
line-height: 30px;
text-align: left;
font-weight: bold;
overflow: visible:
word-break: break-all;
word-break: break-word;
width: max-content;
height: 30px;
}
#slider .article-data h1 a {
display: inline-block;
color: auto;
}
#slider .article-data h2 {
position: relative;
top: -8px;
left: 0px;
padding: 0px 15px 15px;
background: white;
color: #1a1a3d;
font-size: 32px;
line-height: 50px;
text-align: left;
font-weight: bold;
overflow: visible:
word-break: break-all;
word-break: break-word;
width: max-content;
height: 50px;
}
#slider .article-data h2 a {
display: inline-block;
color: auto;
}
#slider .bjqs-markers {
display: block;
position: absolute;
top: 35px;
right: -345px;
width: 345px;
z-index: 5;
}
#slider .bjqs-markers li {
background: #cfcfcf;
font-family: Playfair Display;
font-size: 20px;
line-height: 24px;
margin: 0 0 2px;
}
#slider .bjqs-markers li + li + li + li + li {
display: none;
}
#slider .bjqs-markers li.active-marker {
background: #353535;
}
#slider .bjqs-markers a {
background: rgba(0, 0, 0, 0.12);
position: relative;
display: block;
padding: 15px;
z-index: 2;
}
#slider .bjqs-markers a:hover {
background: #b7b5b5;
color: #000;
}
#slider .bjqs-markers .active-marker a {
background: #353535;
color: #fff;
}
#slider .bjqs-markers .active-marker {
position: relative;
}
#slider .bjqs-markers .active-marker:after {
position: absolute;
content: "";
right: 100%;
top: 50%;
border: solid transparent;
height: 0;
width: 0;
pointer-events: none;
border-color: transparent;
border-right-color: #353535;
border-width: 28px;
margin-top: -28px;
}
#slider ul.bjqs-controls {
display: block;
position: relative;
top: -350px;
width: 100%;
font-family: Arimo;
z-index: 10;
}
#slider ul.bjqs-controls li {
position: absolute;
font-size: 65px
color: white;
}
#slider ul.bjqs-controls li a {
background: #b00538;
position: relative;
padding: 0px 0px 58px;
display: block;
color: white;
font-size: 55px;
line-height: 50px;
font-weight: bold;
opacity: 0.9;
font-family: "Open Sans", sans-serif;
}
.bjqs-prev a:after,
.bjqs-next a:after {
content: none;
}
#slider ul.bjqs-controls .bjqs-next {
background: #b00538;
color: white;
right: 10px;
}
#slider ul.bjqs-controls .bjqs-prev {
background: #b00538;
color: white;
left: 10px;
}