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>
강력한 텍스트
내 자바 스크립트
$(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');
}
}
});
감사합니다.