javascript - Slicebox 没有显示错误，但屏幕上仍然没有任何内容
问题描述
该代码在开发人员模式下没有显示任何错误，但仍然无法正常工作。我从https://www.youtube.com/watch?v=q_RaXJhcwJE
如果您发现任何错误或错误，请帮助我。代码与视频中的完全相同，但我认为可能存在一些错误，或者可能需要一些额外的文件。
另外，如果您知道如何学习 slicebox，或者有任何资源，请分享。
<!DOCTYPE html>
<html>
<head>
<title>sliced image slider</title>
<link rel="stylesheet" type="text/css" href="slicebox/css/demo.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="slicebox/js/modernizr.custom.46884.js"></script>
<script src="slicebox/js/jquery.slicebox.min.js"></script>
<style type="text/css">
.sb-slider{
margin: 10px auto;
position: relative;
overflow: hidden;
width: 100%;
list-style: none;
padding: 0;
}
.sb-slider li{
margin: 0;
padding: 0;
display: none;
}
.sb-slider li > a{
outline: none;
}
.sb-slider li > a img{
border: none;
}
.sb-slider img {
max-width: 100%;
display: block;
}
.sb-description{
padding: 20px;
bottom: 10px;
left: 10px;
right: 10px;
z-index: 2000;
position: absolute;
background: #cbbfae;
background: rgba(190, 176, 155, .4);
border-left: 4px solid rgba(255,255,255,0.7);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter: alpha(opacity:=0);
opacity: 0;
color: white;
transition: all 200ms;
}
.sb-slider li.sb-current .sb-description{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter: alpha(opacity:=80);
opacity: 1;
}
.sb-slider li.sb-current .sb-description:hover{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=99);
filter: alpha(opacity:=99);
background: rgb(190, 176, 155,.7);
}
.sb-perspective{
position: relative;
}
.sb-perspective > div {
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.sb-slide{
margin: 0;
display: block;
position: absolute;
transform-style: preserve-3d;
}
.container{
margin: 30px;
}
.shadow{
width: 100%;
height: 168px;
position: relative;
margin-top: -100px;
background: url('slicebox/images/shadow.png') 100% 100%;
z-index: -1;
display: none;
}
.sb-description h3{
font-size: 20px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
.sb-description h3 a{
color: #4a3c27;
text-shadow: 0px 1px 1px rgba(0, 0, 0, .5);
}
.nav-arrows{
display: none;
}
.nav-arrows a{
width: 42px;
height: 42px;
background: #cbbfae url('jw.png') no-repeat top left;
position: absolute;
top: 50%;
left: 2px;
text-indent: -9000px;
cursor: pointer;
margin-top: -21px;
opacity: 0.9;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}
.nav-arows a:first-child{
left: auto;
right: 2px;
background-position: top right;
}
.nav-arows a:hover{
opacity: 1;
}
.nav-dots{
text-align: center;
position: absolute;
bottom: -5px;
height: 30px;
width: 100%;
left: 0;
display: none;
}
.nav-dots span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #cbbfae;
cursor: pointer;
box-shadow: 0 1px 1px rgba(255,255,255,0.6)
inset 0 1px 1px rgba(255,255,255,0.1);
}
.nav-dots span.nav-dot-current{
box-shadow: 0 1px 1px rgba(255,255,255,0.6) inset 0 1px 1px rgba(255,255,255,0.1)
inset 0 0 0 8px rgba(255,255,255,1)
}
.nav-options{
width: 70px;
height: 30px;
position: absolute;
right: 70px;
bottom: 0px;
display: none;
}
.nav-options span{
width: 30px;
height: 30px;
background: #cbbfae url('jw.png') no-repeat top left;
text-indent: -9000px;
cursor: pointer;
opacity: 0.7;
display: inline-block;
border-radius: 50%;
}
.nav-options span:first-child{
background: -30px 0px;
margin-right: 3px;
}
.nav-options span:hover{
opacity: 1;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid">
<div class="wrapper">
<ul class="sb-slider" id="sb-slider col-md-offset-4">
<li>
<a href=""><img src="slicebox/images/1.jpg"></a>
<div class="sb-description">
<h3>beautiful family</h3>
</div>
</li>
<li>
<a href=""><img src="slicebox/images/2.jpg"></a>
<div class="sb-description">
<h3>beautiful family</h3>
</div>
</li>
<li>
<a href=""><img src="slicebox/images/3.jpg"></a>
<div class="sb-description">
<h3>beautiful family</h3>
</div>
</li>
<li>
<a href=""><img src="slicebox/images/4.jpg"></a>
<div class="sb-description">
<h3>beautiful family</h3>
</div>
</li>
</ul>
<div id="shadow" class="shadow"></div>
<div id="nav-arrows" class="nav-arrows">
<a href="">Next</a>
<a href="">Previous</a>
</div>
</div>
</div>
<script type="text/javaScript">
$(document).ready(function(){
var page = (function(){
var $navArrows = $ ('#nav-arrows').hide(),
$shadow = $('#shadow').hide(),
slicebox = $('#sb-slider').slicebox({
onReady : function(){
$navArrows.show();
$shadow.show();
},
orientation: 'r',
cuboidsRandom: true,
disperseFactor: 30
}),
init = function(){
initEvents();
},
initEvents = function(){
$navArrows.children(':first').on('click', function(){
slicebox.next();
return false;
});
$navArrows.children(':last').on('click', function(){
slicebox.previous();
return false;
});
};
return {init : init};
})();
page.init();
});
</script>
</body>
</html>解决方案
当您运行您提供的代码段时，这是我看到的错误：
jQuery.Deferred 异常：$(...).slicebox 不是函数 TypeError: $(...).slicebox 不是函数
仅从错误消息看来，您的问题似乎不包括 Slicebox 插件作为 JS 文件。
您需要访问 Slicebox 网站（在本例中为Github），下载jquery.slicebox.js文件，然后将其包含在您的网站中，如下所示：
<script src='jquery.slicebox.js'></script>
但是，由于这是来自片段，我不能确定您是否只是没有在片段中包含依赖项，所以它会抛出这个错误。
如果没有，您看到的错误是什么（也许检查控制台）？
推荐阅读
- ruby-on-rails - 致命：用户“postgres”版本 11 的密码验证失败
- c - 相邻重复去除器功能
- elixir - 从地图列表中获取 %{key,value}
- javascript - 如何在计算属性名称中解释关键字“this”？
- r - 将一列中的 NA 替换为 dplyr 中另一列的值
- python - Spearman 等级相关性 - TypeError：“int”对象不可调用
- python - 在新的训练数据上使用预训练的 XML 文件在 python 中重新训练 OPENCV 级联分类器
- mulesoft - Cloud Hub 部署中的 Mule 部署命名空间问题
- python - Plotly：如何为标准偏差制作具有多条线和阴影区域的图形？
- vue.js - VUE：在推送时刷新目标路由上的组件