0
現在、私のサイトでflexsliderの設定に問題があります。私はエリクシールラベールとバワーを使用しています。
私はすべての私のSCSS、コンパイル少ないとJSファイルを持っているが、私は私のホームページ上のスライダーに関連するもののコードを追加したときに、私はこのエラーを取得：
Uncaught TypeError: $(...).flexslider is not a function using
何もで私のページ上に表示されていないようにみえすべて
私はここで私は私のスライダーを上に表示したいページであるだけ
<!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>
をテストするためにlayout.bladeファイルにJavaScriptを追加しました：
は、@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']);
});
ファイルです！
互換性の理由
jqueryがjs – pradeep
のすべての冒頭に含まれていることを確認してください。私は最初に – avasssso
をインストールしました。ブートストラップ前にflexsliderを追加しましたが、エラーはなくなりましたが、何らかの理由でスライダが表示されません。 – avasssso