如何使用MVC cshtml构建轮播图像滑块？

I am trying to code a carousel image slider in MVC using cshtml, the pictures are only displaying in one vertical row and isn't populating into the Carousel slider itself?
Here is what I have attempted so far:

我试图使用cshtml在MVC中编写轮播图像滑块,图片只显示在一个垂直行中,而不是填充到Carousel滑块本身?这是我到目前为止所尝试的:

Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
@Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")

Products

<script src="Scripts/jquery.cycle.all.js"></script>
<script src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript"> $('#slider').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' });
</script>

<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />

    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
    <script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
    <script src="Content/js/jquery-1.7.min.js"></script>
    <script src="Content/js/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(document).ready(function ()
        {
            var carousel = $("#carousel").featureCarousel({


                // include options like this:
                // (use quotes only for string values, and no trailing comma after last option)
                // option: value,
                // option: value
            });

            $("#but_prev").click(function () {
                carousel.prev();
            });
            $("#but_pause").click(function () {
                carousel.pause();
            });
            $("#but_start").click(function () {
                carousel.start();
            });
            $("#but_next").click(function () {
                carousel.next();
            });
        });
    </script>


          <center>



                    <div class="carousel-container"></div>

                        <div id="carousel">
                            <div class="carousel-feature">
                                <a href="#"><img class="carousel-image" alt="Image Caption" src="~/Images/1.jpg" /></a>
                                <div class="carousel-caption">

                                </div>
                            </div>

                            <div class="carousel-feature">
                                <a href="#"><img class="carousel-image" alt="Image Caption" src="~/Images/2.jpg"></a>
                                <div class="carousel-caption">

                                </div>
                            </div>

                            <div class="carousel-feature">
                                <a href="#"><img class="carousel-image" alt="Image Caption" src="~/Images/3.jpg"></a>
                            </div>

                            <div class="carousel-feature">
                                <a href="#"><img class="carousel-image" alt="Image Caption" src="~/Images/4.jpg"></a>
                                <div class="carousel-caption">
                                </div>
                            </div>

                            <div class="carousel-feature">
                                <a href="#"><img class="carousel-image" alt="Image Caption" src="~/Images/5.jpg"></a>
                                <div class="carousel-caption">
                                </div>
                            </div>

                            <div id="carousel-left"><img src="~/Content/images/arrow-left.png" /></div>
                            <div id="carousel-right"><img src="~/Content/images/arrow-right.png" /></div>
                        </div>

           </center>

1 个解决方案

#1

I found there are multiple jQuery references in view.

我发现在视图中有多个jQuery引用。

    <script src='../../Scripts/jquery-1.5.1.min.js'></script>
    <script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
   <script src="Content/js/jquery-1.7.min.js"></script>

Remove multiple jQuery references from the view.

从视图中删除多个jQuery引用。

Only one is enough.

只有一个就足够了。

<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>

#1