1
さまざまなムービーを含むカルーセルで反応性の高いページを作成しようとしています。私はジャンル別に映画をフィルタリングし、カルーセルのその時に選択された1つのジャンルのみを表示できるようにしたい。jQuery滑らかなスライダーフィルター
私は最初にブートストラップカルーセルを使ってみましたが、それはjQueryの滑らかなスライダーを使って行こうとしているようです。 しかし、私は、応答性のあるデザインで滑らかな使い方をしている人もいます。
それはおそらく、私は次のエラーが届きますJA-ファイル原因で何か：
"Uncaught TypeError: $(...).slickUnfilter is not a function
at HTMLButtonElement.<anonymous> (slider.js:31)
at HTMLButtonElement.dispatch (jquery-1.11.0.min.js:3)
at HTMLButtonElement.r.handle (jquery-1.11.0.min.js:3)
(anonymous) @ slider.js:31
dispatch @ jquery-1.11.0.min.js:3
r.handle @ jquery-1.11.0.min.js:3"
私のhtmlファイルを
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/sida.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../slick/slick.css"/>
<link rel="stylesheet" tyoe="text/css" href="../slick/slick-theme.css">
<title>Sida</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body background="../images/background.jpg">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container" >
<div class="row">
<div class="col-xs-12">
<div class="movies-carousel">
<div class="item filter-Action"><img class="movies-selector" src="../images/hotfuzz.jpg" /></div>
<div class="item filter-Comedy"><img class="movies-selector" src="../images/superbad.jpg" /></div>
</div>
<div class="movie-wrapper">
<ul class="genres">
<li id="Action"><button class="btn btn-xs btn-primary movies-button">Action</button></li>
<li id="Comedy"><button class="btn btn-xs btn-primary movies-button">Comedy</button></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../slick/slick.min.js"></script>
<script type="text/javascript" src="../js/slider.js"></script>
</body>
強いテキスト
私のjavascript
$(document).ready(function(){
$('.movies-carousel').slick({
});
});
$('.movies-button').on('click', function(){
var filtername = $(this).parent('li').attr('id');
var currentclass = $(this).attr('class');
if(currentclass == 'btn btn-xs btn-default movies-button') {
// currently filtered, turn the others off and this on
$('.movies-carousel').slickUnfilter();
$('.movies-carousel').slickFilter('.filter-' + filtername);
$('.movies-carousel').slickGoTo(0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
} else {
// is this the only currently selected movie or are they all active?
var numberactive = $('.genres').find('.btn-default').length;
if(numberactive > 0) {
// toggle them all back on
$('.movies-carousel').slickUnfilter();
$('.movies-carousel').slickGoTo(0);
$('.movies-button').attr('class', 'btn btn-xs btn-primary movies-button');
} else {
// switch the others off
$('.movies-carousel').slickUnfilter();
$('.movies-carousel').slickFilter('.filter-' + filtername);
$('.movies-carousel').slickGoTo(0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
}
}
});
ありがとう