Question

我的WP theme中有自举旋转木马，但整个滑块移动了四个项目，我将如何逐个无限循环移动它们？我只是想复制this solution，只有第一个项目可见。

以下是我的代码：

 <div class="carousel slide" data-ride="carousel" id="partneri-carousel">                          
        <div class="carousel-inner">

        <div class="item active">
            <div class="col-3 column text-center">
             <div class="logo">
                 <img src="http://demo.kybernaut.cz/dgsimona/wp-content/uploads/2015/02/cvicny_partner2.png">
                 </div>
                 <div class="popisek">Simona je nkjnaskndkjsan bjhdbasjhbdjhba snhjqbsjwqb sbjqwbsq dbjudwzgzd</div>
                 <div><a href="http://www.kybernaut.cz" target="_blank">www.kybernaut.cz</a></div>                                  
            </div>
            <div class="col-3 column text-center">
                 <div class="logo">
                 <img src="http://demo.kybernaut.cz/dgsimona/wp-content/uploads/2015/02/cvicny_partner.png">
                 </div>
                 <div class="popisek">You can re-order with drag & drop, the order will update after saving.</div>
                 <div><a href="http://www.kybernaut.cz" target="_blank">www.kybernaut.cz</a></div>                                  
            </div>
            <div class="col-3 column text-center">
                 <div class="logo">
                 <img src="http://demo.kybernaut.cz/dgsimona/wp-content/uploads/2015/02/cvicny_partner2.png">
                 </div>
                 <div class="popisek">www.kybernaut.czwww. kybernaut.czwww. kybernaut. czwww.kybernaut.cz</div>
                 <div><a href="http://www.kybernaut.cz" target="_blank">www.kybernaut.cz</a></div>                                  
            </div>
            <div class="col-3 column text-center">
                 <div class="logo">
                 <img src="http://demo.kybernaut.cz/dgsimona/wp-content/uploads/2015/02/cvicny_partner.png">
                 </div>
                 <div class="popisek">Pokud chcete použít toto uživatelské jméno, klikněte na tlačítko</div>
                 <div><a href="http://www.kybernaut.cz" target="_blank">www.kybernaut.cz</a></div>                                  
            </div>
        </div>
        <div class="item">
            <div class="col-3 column text-center">
                 <div class="logo">
                 <img src="http://demo.kybernaut.cz/dgsimona/wp-content/uploads/2015/02/cvicny_partner2.png">
                 </div>
                 <div class="popisek">uživatelské jméno, klikněte na tlačítko Pokud chcete použít toto </div>
                 <div><a href="http://www.kybernaut.cz" target="_blank">www.kybernaut.cz</a></div>                                  
            </div>
        </div>                            
    </div>

        <!-- Carousel Buttons Next/Prev -->
        <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><img src="http://demo.kybernaut.cz/dgsimona/wp-content/themes/sb/images/arr_simple_left.png" alt="arr_simple_left"></a>
        <a data-slide="next" href="#quote-carousel" class="right carousel-control"><img src="http://demo.kybernaut.cz/dgsimona/wp-content/themes/sb/images/arr_simple_right.png" alt="arr_simple_right"></a>
      </div>                          
    </div>

这是我的jquery：

<script>
$(document).ready(function() {
  $('#partneri-carousel').carousel({
    pause: "hover",
    interval: 4000,
  });
});</script>

我想要实现的目标如下：（数字表示“伙伴盒”，“=＆gt;”旋转木马的一个移动，具有前六个伙伴的盒子） 1 2 3 4 =＆gt; 2 3 4 5 =＆gt; 3 4 5 6 =＆gt; 4 5 6 1 =＆gt; 5 6 1 2 =＆gt;无限循环

感谢您的帮助！

Answer 1

您是否尝试过moveSlides参数？我不知道你正在使用的脚本，但代码读起来就是这样。

（对不起，我不能发表这样一个模糊的答案作为评论，我的名声不够高）

Answer 2

Bootstrap幻灯片被定义为具有类＆＃34; item＆＃34;的元素，这就是为什么你的前四个＆＃34;项目＆＃34;正在移动 - 它们实际上是一个单品。

样本＆＃34;单身＆＃34;项：

<div class="item active">
  <div class="col-3 column text-center">
   <div class="logo">
     <img src="http://demo.kybernaut.cz/dgsimona/wp-content/uploads/2015/02/cvicny_partner2.png">
     </div>
     <div class="popisek">Simona je nkjnaskndkjsan bjhdbasjhbdjhba snhjqbsjwqb sbjqwbsq dbjudwzgzd</div>
     <div><a href="http://www.kybernaut.cz" target="_blank">www.kybernaut.cz</a></div>
  </div>
</div>

上面的代码也没有在控件中正确引用轮播。

我已经在这个小提琴中整理了你的标记，希望能做你想做的事：http://jsfiddle.net/davidcw/k1jnj15b/

祝你好运！

编辑：动态设置WordPress中的项目数

对不起，我误会了。你可以通过关闭＆amp;根据您的图像是否是目标数字的倍数（在本例中为4）打开div。启动计数器，并使用类似if( $i % $slidenumber == 0 && $i < $rowcount)之类的内容来确定是否应关闭项目div。

此代码或类似代码应放入您的.carousel-inner div：

<?php

    $i = 1;
    //added before the while loop to ensure the div gets opened
    echo "<div id='item-$i' class='item'><ul class='carousel-thumbnails'>";

    $rowcount = count( get_field('carousel_images')); // the total number of images - counts rows in the ACF repeater array, so you may need a different method of counting rows.

        while( has_sub_field('carousel_images') ){

             /*===========================================================*/
             $slidenumber = 4; // SET NUMBER OF SLIDES HERE
             /*===========================================================*/
             $thumb_id = get_sub_field('image');
             $thumbsize = "thumbnail"; // (thumbnail, medium, large, full or custom size)
             $thumbimage = wp_get_attachment_image_src( $thumb_id, $thumbsize );

             ?>
              <li>
                 <img src="<?php echo $thumbimage[0]; ?>" />
              </li>
              <?php

         // if multiple of $slidenumber close div and open a new div
         $itemNumber = ($i / $slidenumber) + 1;

         if( $i % $slidenumber == 0 && $i < $rowcount) {

           echo "</ul></div><div id='item-$itemNumber' class='item'><ul class='carousel-thumbnails'>";

            }

        $i++;

        };

    //make sure open div is closed
    echo "</ul></div>";

    ?>

标记：

<div class="row">
  <div class="col-md-12">
    <div class="carousel slide" id="thumb-carousel">
      <div class="carousel-inner">
        <!--
        PHP block from above goes here
        -->
      </div><!-- /.carousel-inner -->
      <!-- Carousel nav -->
      <a class="left carousel-control" href="#thumb-carousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#thumb-carousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
  </div>
</div>

您还需要将活动类动态添加到第一个轮播项目，以便轮播启动。您可以使用以下jQuery执行此操作：

(function( $ ) {'use strict';
  $(function() {
    // Give active class to the first thumbnail item (block of images)
    $("#thumb-carousel .item:first").addClass("active");
  });
})( jQuery );

为了完整起见，您需要添加一些CSS规则以使图像（在ul中）正确显示。因此，对于上面的示例，您需要：

ul.carousel-thumbnails {
  font-size: 0;
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  height: 78px;
  overflow: hidden;
}
.carousel-thumbnails li {
  display: inline-block;
  margin-left: 20px;
}

bootstrap carousel如何移动一个项目

2 个答案:

编辑：动态设置WordPress中的项目数