Jquery内容传送带未正确加载项目

我正在进行简单的引导内容传送带。。。。

问题是每张幻灯片上应该加载3个项目…从代码中可以看出，但每张幻灯片上只加载一个项目…除了项目加载之外，其他滑块工作正常

剃须刀代码：

<div class="container img-responsive" style="background: #d9e5e9;
padding-left: -0px; padding-bottom: 10px; padding-top: 10px;
margin: 20px auto; width: 980px;">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            @{
                int counter = 0;
                foreach (var item in ViewBag.LoadEps)
                {
                    if (counter == 0)
                    {
                        <div class="item active">
                            <div class="col-lg-4">   
   <a href="@Url.Action("LoadEpisodes", "Home", new { id = item.VideoId,
    epId =item.VideoEpisodeId, name = item.Title.Replace(" ", "-")}, null)"
    style="color: white; text-align: center; line-height: 12px;">
    <img src="@Url.Content(item.PosterUrl)" height="130" 
    width="200" alt="@item.Title" class="ImageBorder" /><br />@item.Title
                                    </a>
                            </div>
                        </div>
                    }

                    else
                    {
                        <div class="item">
                            <div class="col-lg-4">
                               
    <a href="@Url.Action("LoadEpisodes", "Home", new { id = item.VideoId,
    epId =item.VideoEpisodeId, name = item.Title.Replace(" ", "-")}, null)"
    style="color: white; text-align: center; line-height: 12px;">
    <img src="@Url.Content(item.PosterUrl)" height="130" 
    width="200" alt="@item.Title" class="ImageBorder" /><br />@item.Title
                                    </a>
                            </div>
                        </div>
                    }
                    counter++;
                }
            }
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
</div>

@{
int计数器=0；
foreach（ViewBag.LoadEps中的变量项）
{
如果（计数器==0）
{
}
其他的
{
}
计数器++；
}
}

风格

<style>
    .carousel-inner .active.left {
        left: -25%;
    }

    .carousel-inner .next {
        left: 25%;
    }

    .carousel-inner .prev {
        left: -25%;
    }

    .carousel-control {
        width: 4%;
    }

        .carousel-control.left, .carousel-control.right {
            margin-left: 15px;
            background-color: #036ca6;
        }
</style>

.旋转木马内部。活动。左侧{
左-25%；
}
.旋转木马内部。下一个{
左：25%；
}
.carousel-inner.prev{
左-25%；
}
.传送带控制{
宽度：4%；
}
.carousel-control.left、.carousel-control.right{
左边距：15px；
背景色：#036ca6；
}

脚本

<script>
    $(document).ready(function () {
        $('#myCarousel').carousel({
            interval: 4000
        })

        $('.carousel .item').each(function () {
            var next = $(this).next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

            for (var i = 0; i < 2; i++) {
                next = next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }

                next.children(':first-child').clone().appendTo($(this));
            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（'myCarousel'）。carousel({
间隔时间：4000
})
$（'.carousel.item'）。每个（函数（）{
var next=$（this.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
对于（变量i=0；i<2；i++）{
next=next.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
}
});
});

问题只在于项目加载，尽管滑块工作正常，库加载正常。。。。 我不知道如何测试它，并找到像firebug中的控制台错误这样的错误。。。 我无法自己整理jquery。。。。 如果有人愿意帮忙，我们将不胜感激。。。。。

---

感谢您的时间。

这里是一个猫头鹰旋转木马的工作示例，在我尝试过的任何地方都可以很好地工作，如果它对您不起作用，请点击聊天，我将帮助您使其工作

$（文档）.ready（函数（）{
$（“#猫头鹰示例”）.owlCarousel({
自动播放：3000，//将自动播放设置为3秒
项目：3，
});
});

我认为旋转木马仅适用于1个项目，如果您想要更多，术语是slider。您想如何安排它？同样，这是一个旋转木马，因此，据我所知，对于出现的项目数量没有任何选项。你只是想创建一个使用引导框架的滑块吗？当然，请稍等。猫头鹰转盘在常规网站和wordpress内部工作得最好。根据我的经验，它的设置和使用非常简单：-我将为你创建一个示例。谢谢。我的解决方案是：如果在DOM中加载了8个图像，然后使用jquery设置

items:7

，但是如果我设置

items:8

或

items:10

则无效。@stom

items

属性的意思是：

此变量允许您设置一次显示的最大项目数和最宽的浏览器宽度

——这意味着如果DOM中有8个图像，则所有图像都将作为“第一张幻灯片”加载.

<div id="owl-example" class="owl-carousel">
    <div> <img src="http://cdn.oxwordsblog.wpfuel.co.uk/wpcms/wp-content/uploads/Lion_iStock_XSmall-300x300.jpg?24a0bc" /> </div>
  <div> <img src="http://www.wildlife-pictures-online.com/image-files/lion-male_2724.jpg" /> </div>
  <div> <img src="http://upload.wikimedia.org/wikipedia/commons/9/94/Lion_Foret.jpg" /> </div>
    <div> <img src="http://cdn.oxwordsblog.wpfuel.co.uk/wpcms/wp-content/uploads/Lion_iStock_XSmall-300x300.jpg?24a0bc" /> </div>
  <div> <img src="http://www.wildlife-pictures-online.com/image-files/lion-male_2724.jpg" /> </div>
  <div> <img src="http://upload.wikimedia.org/wikipedia/commons/9/94/Lion_Foret.jpg" /> </div>
    <div> <img src="http://cdn.oxwordsblog.wpfuel.co.uk/wpcms/wp-content/uploads/Lion_iStock_XSmall-300x300.jpg?24a0bc" /> </div>
  <div> <img src="http://www.wildlife-pictures-online.com/image-files/lion-male_2724.jpg" /> </div>
  <div> <img src="http://upload.wikimedia.org/wikipedia/commons/9/94/Lion_Foret.jpg" /> </div>
</div>

$(document).ready(function() {
    $("#owl-example").owlCarousel({
        autoPlay: 3000, //Set AutoPlay to 3 seconds
        items : 3,   
    });
});