bootstrap轮播如何移动一个项目

Question

我的 WP theme, but the whole slider is moving by four items, how I would achive to move them one by one infinite loop? I've tried just to copy this solution 中有 bootstrap 个旋转木马，但只有第一个项目可见。

这是我现在的代码：

 <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>

我想要实现的是：（数字代表 "partner box", "=>" 旋转木马的一个动作，例如有六个合作伙伴的盒子） 1 2 3 4 => 2 3 4 5 => 3 4 5 6 => 4 5 6 1 => 5 6 1 2 => 无限循环

感谢您的帮助！

Answer 1

你试过 moveSlides 参数了吗？我不知道您使用的是什么脚本，但代码看起来就像那样。

（抱歉我不能post评论这么含糊的回答，我的声望不够高）

Answer 2

Bootstrap 幻灯片被定义为具有 class“项目”的元素，这就是为什么您的前四个“项目”在移动 - 它们实际上是一个项目。

示例“单个”项目：

<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>

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

我已经整理了您在此 fiddle 中的标记，希望它能满足您的要求：http://jsfiddle.net/davidcw/k1jnj15b/

祝你好运！

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

对不起，我误会了。您可以根据图像是否是目标数量的倍数（在本例中为 4）关闭和打开 divs 来完成您需要的操作。启动一个计数器，并使用类似 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>

您还需要将活动 class 动态添加到第一个轮播项目，以便轮播启动。您可以使用以下 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轮播如何移动一个项目

bootstrap carousel how to move by one item

css

wordpress

jquery

twitter-bootstrap

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