我有一个图像轮播，4图像的变化，我想它旋转一个图像的时间，例如，前4个图像出现，但作为其余的图像出现，因为他们的变化。
在我的jQuery代码中，我附加在代码中，我无法做到这一点。
如果有人能帮助我，我会很感激，我已经尝试了几种方法，但我没有成功。
然后，他发送了图像轮播当前如何工作的图像。
加载前4个图像时：

的数据
但是当它加载其他图像时，如果我没有4个图像，就像这样，它会在右侧留下空的旋转木马，看起来很糟糕：

的

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src='https://henao.hoztcrea.com/laboral/wp-content/themes/jarida/js/jquery.cycle.all.js' id='tie-cycle-js'></script>
<section class="cat-box scroll-box scroll-box-wide tie-cat-7">
   <h2 class="cat-box-title"><a href="posts\category\world\index.htm">Scrolling Box</a></h2>
   <div class="cat-box-content">
      <div class="group_items-box" id="wslideshow7">
         <div class="scroll-item">
            <div class="post-thumbnail">
               <a href="posts\48\index.htm" title="Permalink to Post With Featured Image" rel="bookmark">
               <img width="300" height="160" src="wp-content\uploads\2012\07\7413497016_9434c1917a_b-300x160.jpg" class="attachment-tie-large size-tie-large wp-post-image" alt="Test 2" loading="lazy" srcset="wp-content\uploads\2012\07\7413497016_9434c1917a_b-300x160.jpg 300w, wp-content\uploads\2012\07\7413497016_9434c1917a_b-620x330.jpg 620w" sizes="(max-width: 300px) 100vw, 300px"> </a>
            </div>
            <h3 class="post-box-title"><a href="posts\48\index.htm" title="Permalink to Post With Featured Image" rel="bookmark">Post With Featured Image</a></h3>
            <p class="post-meta">
               <span class="tie-date">July 30, 2012</span> 
            </p>
         </div>
         <div class="scroll-item">
            <div class="post-thumbnail">
               <a href="posts\33\index.htm" title="Permalink to Post with SoundCloud" rel="bookmark">
               <img width="300" height="160" src="wp-content\uploads\2012\07\4088743235_690996beef_o-300x160.jpg" class="attachment-tie-large size-tie-large wp-post-image" alt="" loading="lazy" srcset="wp-content\uploads\2012\07\4088743235_690996beef_o-300x160.jpg 300w, wp-content\uploads\2012\07\4088743235_690996beef_o-620x330.jpg 620w" sizes="(max-width: 300px) 100vw, 300px"> </a>
            </div>
            <h3 class="post-box-title"><a href="posts\33\index.htm" title="Permalink to Post with SoundCloud" rel="bookmark">Post with SoundCloud</a></h3>
            <p class="post-meta">
               <span class="tie-date">July 30, 2012</span> 
            </p>
         </div>
         <div class="scroll-item">
            <div class="post-thumbnail">
               <a href="posts\30\index.htm" title="Permalink to Post with Image + Lightbox" rel="bookmark">
               <img width="300" height="160" src="wp-content\uploads\2012\07\4756831209_cfe3227937_b-300x160.jpg" class="attachment-tie-large size-tie-large wp-post-image" alt="" loading="lazy" srcset="wp-content\uploads\2012\07\4756831209_cfe3227937_b-300x160.jpg 300w, wp-content\uploads\2012\07\4756831209_cfe3227937_b-620x330.jpg 620w" sizes="(max-width: 300px) 100vw, 300px"> </a>
            </div>
            <h3 class="post-box-title"><a href="posts\30\index.htm" title="Permalink to Post with Image + Lightbox" rel="bookmark">Post with Image + Lightbox</a></h3>
            <p class="post-meta">
               <span class="tie-date">July 30, 2012</span> 
            </p>
         </div>
         <div class="scroll-item">
            <div class="post-thumbnail">
               <a href="posts\24\index.htm" title="Permalink to Post With Video" rel="bookmark">
               <img width="300" height="160" src="wp-content\uploads\2012\07\5709944739_578bc434a7_b-300x160.jpg" class="attachment-tie-large size-tie-large wp-post-image" alt="" loading="lazy" srcset="wp-content\uploads\2012\07\5709944739_578bc434a7_b-300x160.jpg 300w, wp-content\uploads\2012\07\5709944739_578bc434a7_b-620x330.jpg 620w" sizes="(max-width: 300px) 100vw, 300px"> </a>
            </div>
            <h3 class="post-box-title"><a href="posts\24\index.htm" title="Permalink to Post With Video" rel="bookmark">Post With Video</a></h3>
            <p class="post-meta">
               <span class="tie-date">July 30, 2012</span> 
            </p>
         </div>
         <div class="scroll-item">
            <div class="post-thumbnail">
               <a href="posts\14\index.htm" title="Permalink to Maecenas mattis, tortor ut posuere aliquam" rel="bookmark">
               <img width="300" height="160" src="wp-content\uploads\2012\07\7543602860_c741e700c0_b-300x160.jpg" class="attachment-tie-large size-tie-large wp-post-image" alt="" loading="lazy" srcset="wp-content\uploads\2012\07\7543602860_c741e700c0_b-300x160.jpg 300w, wp-content\uploads\2012\07\7543602860_c741e700c0_b-620x330.jpg 620w" sizes="(max-width: 300px) 100vw, 300px"> </a>
            </div>
            <h3 class="post-box-title"><a href="posts\14\index.htm" title="Permalink to Maecenas mattis, tortor ut posuere aliquam" rel="bookmark">Maecenas mattis, tortor ut posuere aliquam</a></h3>
            <p class="post-meta">
               <span class="tie-date">July 28, 2012</span> 
            </p>
         </div>
         <div class="scroll-item">
            <div class="post-thumbnail">
               <a href="posts\39\index.htm" title="Permalink to Elementum mauris aliquam ut" rel="bookmark">
               <img width="300" height="160" src="wp-content\uploads\2011\07\4148265552_7b438be4ab_b-300x160.jpg" class="attachment-tie-large size-tie-large wp-post-image" alt="" loading="lazy" srcset="wp-content\uploads\2011\07\4148265552_7b438be4ab_b-300x160.jpg 300w, wp-content\uploads\2011\07\4148265552_7b438be4ab_b-620x330.jpg 620w" sizes="(max-width: 300px) 100vw, 300px"> <span title="Not bad !" class="stars-large"><span style="width:72%"></span></span>
               </a>
            </div>
            <h3 class="post-box-title"><a href="posts\39\index.htm" title="Permalink to Elementum mauris aliquam ut" rel="bookmark">Elementum mauris aliquam ut</a></h3>
            <p class="post-meta">
               <span class="tie-date">July 30, 2011</span> 
            </p>
         </div>
        
         
         <div class="clear"></div>
      </div>
      <div class="scroll-nav"><a id="nextw7" href="#"><i class="tieicon-right-open"></i></a><a class="prev-scroll" id="prevw7" href="#"><i class="tieicon-left-open"></i></a></div>
   </div>
</section>
<!--<div class="clear"></div>-->
<!-- slider1 -->
<script type="text/javascript">
   jQuery(document).ready(function() {
    var vids = jQuery("#wslideshow7 .scroll-item");
    for(var i = 0; i < vids.length; i+=4) {
      vids.slice(i, i+4).wrapAll('<div class="group_items"></div>');
    }
    jQuery(function() {
        jQuery('#wslideshow7').cycle({
            fx:     'scrollHorz',
            timeout: 3000,
            //pager:  '#nav7',
            slideExpr: '.group_items',
            prev:   '#prevw7',
            next:   '#nextw7',
            speed: 300,
            pause: true
        });
    });
    });
</script>

字符串