0
У меня в настоящее время проблема с настройкой flexslider на моем сайте. Я использую эликсир laravel и беседку.
Я все мои SCSS, меньше и JS файлы компилируются, но когда я добавляю что-нибудь код, относящийся к слайдера на моей странице я получаю эту ошибку:
Uncaught TypeError: $(...).flexslider is not a function using
ничего, кажется, показывая на мою страницу в все
Я добавил Javascript в файле layout.blade только для проверки
<!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']);
});
любая помощь будет оценен по достоинству!
убедитесь, что jquery включен в верхнюю часть всех js – pradeep
да. Я установил его сначала – avasssso
. Теперь я добавил flexslider перед загрузкой, и ошибка исчезла, но мой слайдер не появляется по какой-либо причине. – avasssso