Nivo Slider 在 Laravel-5 上不工作
Nivo Slider not working on Laravel-5
我按照这个 guide 加载了所有内容。到目前为止一切正常,但背景 url 似乎不适用于任何 css 文件。我正在添加我的源代码。我已经研究了大约 50 个帖子,但没有一个讨论如何正确地做到这一点。
我的代码。我已经尝试了 (../images 和 (/images 但它们不起作用。
.theme-default .nivoSlider {
position:relative;
background:#fff url(../images/loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
文件位于 /images/loading.gif
将这些 link 添加到页眉中
{!! HTML::style('css/default.css') !!}
将这些文件复制到 /css/js 并将它们 link 复制到您的页面:
{!! HTML::script('css/js/jquery.nivo.slider.js') !!}
{!! HTML::script('css/js/jquery.nivo.slider.pack.js') !!}
然后将其复制到索引页或视图中:
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="../images/toystory.jpg" data-thumb="../images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="../images/up.jpg" data-thumb="../images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="../images/walle.jpg" data-thumb="../images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="../images/nemo.jpg" data-thumb="../images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with
<a href="#">a link</a>. </div>
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
我按照这个 guide 加载了所有内容。到目前为止一切正常,但背景 url 似乎不适用于任何 css 文件。我正在添加我的源代码。我已经研究了大约 50 个帖子,但没有一个讨论如何正确地做到这一点。
我的代码。我已经尝试了 (../images 和 (/images 但它们不起作用。
.theme-default .nivoSlider {
position:relative;
background:#fff url(../images/loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
文件位于 /images/loading.gif
将这些 link 添加到页眉中
{!! HTML::style('css/default.css') !!}
将这些文件复制到 /css/js 并将它们 link 复制到您的页面:
{!! HTML::script('css/js/jquery.nivo.slider.js') !!}
{!! HTML::script('css/js/jquery.nivo.slider.pack.js') !!}
然后将其复制到索引页或视图中:
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="../images/toystory.jpg" data-thumb="../images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="../images/up.jpg" data-thumb="../images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="../images/walle.jpg" data-thumb="../images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="../images/nemo.jpg" data-thumb="../images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with
<a href="#">a link</a>. </div>
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>