我试图使用CSHTML在MVC中编码一个旋转木马的滑块,图片仅在一个垂直行中显示,并且不会填充到旋转木马滑块中?
这是我到目前为止尝试的:
Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
@Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
产品
<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>
我发现有多个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>
从视图中删除多个jQuery引用。
只有一个就足够了。
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>