Tiny carousel 的“#Next”和“#Prev”功能在 mvc 项目中不起作用

Question

我必须在我的项目中使用一个简单的内容轮播..使用 jquery 2.1.3.... 在此之前我使用 jquery 内容轮播但它没有响应所以我一直在寻找简单的响应式轮播并找到：Tiny Carousel

现在我已经将其 .js 和 .css 文件放入 Bundles.config 中，可以看到：

bundles.Add(new ScriptBundle("~/bundles/euro/js").
Include("~/Scripts/euro/*.js", "~/Scripts/euro/jquery.tinycarousel.js"));
bundles.Add(new StyleBundle("~/Content/euro/css").
Include("~/Content/euro/*.css", "~/Content/euro/tinycarousel.css"));

并且在视图中：

 <div id="slider1">
        <a class="buttons prev" href="#">&#60;</a>
        <div class="viewport">
            <ul class="overview">
                <li><img src="~/images/contact.png" /></li>
                <li><img src="~/images/contact.png" /></li>
                <li><img src="~/images/contact.png" /></li>
                <li><img src="~/images/contact.png" /></li>
            </ul>
        </div>
        <a class="buttons next" href="#">&#62;</a>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#slider1').tinycarousel();
        });
    </script>

图片：

问题是 "prev" 和 "next" 控件不工作，也没有显示完整图像

可能是 old/new jquery 的问题...请有人帮忙... 或者我可以检查 firebug 中的脚本或 css 文件问题吗？？

谢谢你的时间..

Answer 1

您可以使用 bootstrap 轮播，对 bootstrap 的现有模板进行一些修改。 Bootstrap 移动每个 .item 元素，因此只需在每个 .item 中放置多个图像，这将给您几乎想要的结果。

DEMO

<div class="container-fluid">
<div class="row-fluid">
<div class="span12">

    <div class="page-header">
        <h3>Bootstrap</h3>
        <p>Responsive Moving Box Carousel Demo</p>
    </div>

    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                    </ul>
              </div><!-- /Slide1 --> 
            <div class="item">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                    </ul>
              </div><!-- /Slide2 --> 
            <div class="item">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>

                        </li>
                    </ul>
              </div><!-- /Slide3 --> 
        </div>

        <div class="control-box">                            
            <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
            <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
        </div><!-- /.control-box -->   

    </div><!-- /#myCarousel -->

</div><!-- /.span12 -->          
</div><!-- /.row --> 
</div><!-- /.container -->

Tiny carousel 的“#Next”和“#Prev”功能在 mvc 项目中不起作用

"#Next" and "#Prev" functions of Tiny carousel not working in mvc project

css

asp.net-mvc

jquery

carousel

twitter-bootstrap