我目前在我的网站上配置flexslider时遇到问题。我正在使用elixir laravel和凉亭。
我已经编译了所有scss,less和js文件,但是当我在主页上添加与滑块相关的任何代码时,我收到此错误:
Uncaught TypeError: $(...).flexslider is not a function using
似乎没有任何内容出现在我的网页上
我在layout.blade文件中添加了javascript只是为了测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Creative Forces Enrichment</title>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">
<link rel="stylesheet" href="{{ elixir('css/style.css') }}">
</head>
<body id="app-layout">
<div class="line"></div>
<header id="header" role="banner">
<div class="container">
<!-- <button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button> -->
<div class="container text-xs-center">
<nav class="nav nav-inline">
<a class="nav-link" href='{{ url("/") }}'>Home</a>
<a class="nav-link" href='{{ url("/team") }}'>Our Team</a>
<a class="nav-link" href='{{ url("/media") }}'>Media</a>
<a href='{{ url("/") }}' class="nav-link"><img src="./images/zipzap.png" alt=""></a>
<a class="nav-link" href='{{ url("/about") }}'>About Us</a>
<a class="nav-link" href='{{ url("/contact") }}'>Contact Us</a>
<a class="nav-link" href='{{ url("/donate") }}' id="donate">Support Us</a>
</nav>
</div>
</div>
</header>
@yield('content')
<div class="container">
<div class="row">
<div class="text-xs-center spacing">
<hr>
<div class="text-center copy">© Zip Zap Zop Enrichment <?php echo date("Y") ?></div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="{{ elixir('js/app.js') }}" type="text/javascript"></script>
<script type="text/javascript">
var metaslider_158 = function($) {
$('#metaslider_158').addClass('flexslider'); // theme/plugin conflict avoidance
$('#metaslider_158').flexslider({
slideshowSpeed:3000,
animation:"fade",
controlNav:false,
directionNav:false,
pauseOnHover:true,
direction:"horizontal",
reverse:false,
animationSpeed:600,
prevText:"<",
nextText:">",
slideshow:false
});
};
var timer_metaslider_158 = function() {
var slider = !window.jQuery ? window.setTimeout(timer_metaslider_158, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_158, 1) : metaslider_158(window.jQuery);
};
timer_metaslider_158();
</script>
</body>
</html>
这是我希望我的滑块显示的页面:
@extends('layout')
@section('content')
<!-- Place somewhere in the <body> of your page -->
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<img src="./images/maja.jpg" />
</li>
<li>
<img src="./images/maja.jpg" />
</li>
<li>
<img src="./images/maja.jpg" />
</li>
</ul>
</div>
<div class="container">
<div class="content-wrapper">
<div class="color-wrapper">
<div class="main-container">
<div class="gdlr-item gdlr-post-slider-item style-post-right post-slider"></div>
</div>
</div>
</div>
</div>
@endsection
这是我的gulp.js文件
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
// Copy Styles
mix.copy('bower_components/bootstrap/scss/', 'resources/assets/sass/libraries/bootstrap/')
.copy('bower_components/css-hamburgers/_sass/hamburgers', 'resources/assets/sass/libraries/hamburgers/')
.copy('bower_components/flexslider/css', 'resources/assets/less/libraries/flexslider/')
// Copy Scripts
.copy('bower_components/jquery/dist/jquery.js', 'resources/assets/js/libraries/jquery.js')
.copy('bower_components/bootstrap/dist/js/bootstrap.js', 'resources/assets/js/libraries/bootstrap.js')
.copy('bower_components/flexslider/jquery.flexslider.js', 'resources/assets/js/libraries/flexslider.js')
// Compile App Assets
.sass('app.scss','public/css/app.css')
.less('app.less','public/css/style.css')
.scripts([
'libraries/jquery.js',
'libraries/bootstrap.js',
'libraries/flexslider.js',
'app/**/*.js'
], 'public/js/app.js', 'resources/assets/js')
// Create version
.version(['css/app.css', 'css/style.css', 'js/app.js']);
});
任何帮助将不胜感激!
答案 0 :(得分:0)
出于兼容性原因,你应该像这样包装你的jquery代码:
(function($){
// jQuery code is in here
})(jQuery);
答案 1 :(得分:0)
您需要确保文档在执行之前已完全加载,或者app.js
中的JavaScript实际上可能需要比预期更长的时间来包含您的库,这将导致此错误。
相反,我们可以将$
替换为jQuery
,我们可以bind to the .ready()
这样处理:
jQuery(function($){
//your code
});
这减少了在闭包中将jQuery
别名为$
,然后在其中执行就绪函数的需要。