BJQS的第一个循环呈现错误

Question

嗨，我想创建一个包含4条文章（4条电影评论）的滑块，并且一切正常，但是有一件事情：当我加载网页时，第一次呈现效果很差。我的意思是，它会加载元素上的所有图像和数据，并且由于“最大内容”数据宽度，我看到了比第一个孩子更长的元素。看到HERE

但是，当我用prev或after按钮单击所有四个子项之后，我可以正确看到它，所以问题就出在第一个循环上。像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>&#11044; &#11044; &#11044;</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;
}