带有引导轮播单 <li> 幻灯片的 php

【问题标题】：php with bootstrap carousel single <li> slide带有引导轮播单 <li> 幻灯片的 php
【发布时间】：2017-04-23 22:45:23
【问题描述】：

我最近在我的项目中添加了引导轮播，它工作正常，但在这里我选择了默认情况下我想要的 noOfProductPage=4，然后我希望单个产品在用户单击下一步时滑入而不是滑动所有 4 个产品

PHP：

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <i class="fa fa-chevron-left fa-2x"></i>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
    <i class="fa fa-chevron-right fa-2x"></i>
</a>
<ol class="carousel-indicators">
    <?php 
    for($i = 0; $i < $noOfProductPage; $i++) {  
        $targetActiveClass = "";
        if ($i == 0) {
            $targetActiveClass == "active";
        } 
    ?>
    <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>" class="<?php echo $targetActiveClass; ?>"></li>
    <?php } ?>
</ol>

简而言之，data-slide-to 应该只是一种产品而不是 4..

【问题讨论】：

标签： php css twitter-bootstrap

【解决方案1】：

使用interval，比如：

$('.carousel').carousel({
  interval: flase
});

希望这会有所帮助！

更多关于Bootstrap Carousel

【讨论】：

我正在这样做，而不是一个图像，我使用 col-md-3 并使用 4 个小图像，但是当我滑动时，我只希望幻灯片的一个图像在单击下一个箭头时滑动跨度>
@Ron 不要使用col-md-3 或这些类，请使用item 类。正确阅读文档（我的答案中的链接）
我必须使用 col-md-3 正确显示 4 张图像，然后我想一次更改一张图像例如，默认情况下我总共有 11 张图像，然后在第一张幻灯片中显示 4 张对于每一个 next 或 prev，只有一个图像应该改变
@Ron 把它们放在item 里面而不是col-md-3 里面，轮播本身就会变成全宽。
我试过轮播让一张图片全宽，下面剩下 3 张图片