我正在尝试让图像滑块/轮播在 ASP.Net MVC 视图中工作。我已经成功让它在正常的 HTML 环境中工作。它被称为“相机环绕”。
我在 Visual Studio 2022 中使用 MVC 5.2.9.0 版本。我已经使用 VB.Net 很长时间了，但对于 HTML、CSS 和 Javascript 的使用相对较新。我了解他们的互动以及他们所做的事情。我特别想使用MVC（VB.Net）。
我实际上将一个工作 HTML 文档复制到我的 MVC 视图中。我已将相关的 css、javascript 和图像添加到解决方案中。 HTML 包含对脚本和 css 文件的相关引用。我还尝试使用“捆绑”选项加载它们。我还在函数调用中更改了“jQuery”的 $ 符号。这个脚本是...
<script>
jQuery(function () {
jQuery('#camera_wrap_1').camera({
thumbnails: true
});
jQuery('#camera_wrap_2').camera({
height: '400px',
loader: 'bar',
pagination: false,
thumbnails: true
});
});
</script>
我收到以下错误...
出现此堆栈跟踪错误。
我希望这是由于我缺乏 MVC 知识而导致的，我尝试在各个位置搜索此问题，但没有成功。
这是我复制的 HTML...
<!DOCTYPE html>
<!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Camera | a free jQuery slideshow by Pixedelic</title>
<meta name="description" content="Camera a free jQuery slideshow with many effects, transitions, adaptive layout, easy to customize, using canvas and mobile ready">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////
//
// Styles
//
///////////////////////////////////////////////////////////////////////////////////////////////////-->
<link rel='stylesheet' id='camera-css' href='../css/camera.css' type='text/css' media='all'>
<style>
body {
margin: 0;
padding: 0;
}
a {
color: #09f;
}
a:hover {
text-decoration: none;
}
#back_to_camera {
clear: both;
display: block;
height: 80px;
line-height: 40px;
padding: 20px;
}
.fluid_container {
margin: 0 auto;
max-width: 1000px;
width: 90%;
}
</style>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////
//
// Scripts
//
///////////////////////////////////////////////////////////////////////////////////////////////////-->
<script type='text/javascript' src='../scripts/jquery.min.js'></script>
<script type='text/javascript' src='../scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='../scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='../scripts/camera.min.js'></script>
<script>
$(function(){
$('#camera_wrap_1').camera({
thumbnails: true
});
$('#camera_wrap_2').camera({
height: '400px',
loader: 'bar',
pagination: false,
thumbnails: true
});
});
</script>
</head>
<body>
<div id="back_to_camera">
<a href="http://www.pixedelic.com/plugins/camera/">← Back to the Camera project</a>
</div><!-- #back_to_camera -->
<div class="fluid_container">
<p>Pagination circles with the height relative to the width</p>
<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
<div data-thumb="../images/slides/thumbs/bridge.jpg" data-src="../images/slides/bridge.jpg">
<div class="camera_caption fadeFromBottom">
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-thumb="../images/slides/thumbs/leaf.jpg" data-src="../images/slides/leaf.jpg">
<div class="camera_caption fadeFromBottom">
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
</div>
</div>
<div data-thumb="../images/slides/thumbs/road.jpg" data-src="../images/slides/road.jpg">
<div class="camera_caption fadeFromBottom">
<em>It's completely free</em> (even if a donation is appreciated)
</div>
</div>
<div data-thumb="../images/slides/thumbs/sea.jpg" data-src="../images/slides/sea.jpg">
<div class="camera_caption fadeFromBottom">
Camera slideshow provides many options <em>to customize your project</em> as more as possible
</div>
</div>
<div data-thumb="../images/slides/thumbs/shelter.jpg" data-src="../images/slides/shelter.jpg">
<div class="camera_caption fadeFromBottom">
It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
</div>
</div>
<div data-thumb="../images/slides/thumbs/tree.jpg" data-src="../images/slides/tree.jpg">
<div class="camera_caption fadeFromBottom">
Different color skins and layouts available, <em>fullscreen ready too</em>
</div>
</div>
</div><!-- #camera_wrap_1 -->
<p>Thumbnails with fixed height</p>
<div class="camera_wrap camera_magenta_skin" id="camera_wrap_2">
<div data-thumb="../images/slides/thumbs/bridge.jpg" data-src="../images/slides/bridge.jpg">
<div class="camera_caption fadeFromBottom">
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-thumb="../images/slides/thumbs/leaf.jpg" data-src="../images/slides/leaf.jpg">
<div class="camera_caption fadeFromBottom">
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
</div>
</div>
<div data-thumb="../images/slides/thumbs/road.jpg" data-src="../images/slides/road.jpg">
<div class="camera_caption fadeFromBottom">
<em>It's completely free</em> (even if a donation is appreciated)
</div>
</div>
<div data-thumb="../images/slides/thumbs/sea.jpg" data-src="../images/slides/sea.jpg">
<div class="camera_caption fadeFromBottom">
Camera slideshow provides many options <em>to customize your project</em> as more as possible
</div>
</div>
<div data-thumb="../images/slides/thumbs/shelter.jpg" data-src="../images/slides/shelter.jpg">
<div class="camera_caption fadeFromBottom">
It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
</div>
</div>
<div data-thumb="../images/slides/thumbs/tree.jpg" data-src="../images/slides/tree.jpg">
<div class="camera_caption fadeFromBottom">
Different color skins and layouts available, <em>fullscreen ready too</em>
</div>
</div>
</div><!-- #camera_wrap_2 -->
</div><!-- .fluid_container -->
<div style="clear:both; display:block; height:100px"></div>
</body>
</html>
有一点，“相机”功能位于另一个脚本中 -camera.min.js 而不是 jquery.min.js，如堆栈跟踪中所述？？？
我尝试使用“bundles”选项加载脚本和CSS文件。我已将脚本 + css 引用“拖”到解决方案资源管理器的视图中。
我更改了“jQuery”的 $ 符号。一点，“相机”功能位于另一个脚本中 -camera.min.js 而不是 jquery.min.js，如堆栈跟踪中所述？？？
这段代码似乎是相机幻灯片的演示。我刚刚下载了它并且运行良好。但是，如果您从 MVC 应用程序调用它，则项目模板的布局中已经包含 jQuery，这会导致重复的 jQuery 引用。
生成的 Html 中应该只有一个 jQuery。