Jquery 内容轮播未正确加载项目

Question

我正在开发简单的 bootstrap 内容轮播.... Live Demo

问题是每张幻灯片应该加载 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>

风格

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

脚本

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

只有项目加载有问题，尽管滑块工作正常，库加载正常.... 我不知道如何测试它并找到 firebug 中的控制台错误之类的错误... 我无法自己整理 jquery.... 如果有人请提供任何类型的帮助，我们将不胜感激..... 谢谢你的时间..

Answer 1

这里是 OWL 轮播的一个工作示例，它在我尝试过的任何地方都可以正常工作，如果它不适合你，请继续聊天，我会帮助你让它工作。

DEMO

<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,   
    });
});

Jquery 内容轮播未正确加载项目

Jquery Content Carousel not loading items properly

css

asp.net-mvc

jquery

carousel

twitter-bootstrap-3