jquery - 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"));

在 View 中:

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

图片:

问题是“上一个”和“下一个”控件不起作用，而且没有显示完整图像

可能是旧的/新的 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 -->