私はhttps://github.com/kenwheeler/slickを私のウェブサイトのカルーセルとして使用しています。私はTにチュートリアルに従って、すべてが(私の知る限り)どのようになることを意味しています。ここでは、コード滑らかなカルーセルが表示されていない/作業中
$(document).ready(function(){
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$(".slider-nav").slick({
slidesToShow: 3,
slidesToScroll, 1,
asNavFor: '.slider',
dots: true,
focusOnSelect, true
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--Semantic import-->
<script src="assets/semantic/semantic.min.js"></script>
<link href="assets/semantic/semantic.min.css" rel="stylesheet" />
<!-- Slick -->
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<!--Font-->
<link href="https://fonts.googleapis.com/css?family=Exo+2|Ubuntu" rel="stylesheet">
<!-- Javascript -->
<script src="js/root.js"></script>
<script src="js/gamesdev.js"></script>
</head>
<body>
<div class="pusher">
<div id="page">
<div class="ui container">
<div class="slider">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="slider-nav">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</div>
</div>
</body>
</html>
私は、すべての不要なコードを切り取ってきたが、ここで結果は
http://i.imgur.com/3M26NFd.png
である私が間違って何が起こっているのか全く気手掛かりを持っていない、私は」です1時間、おそらく2時間のようにそれを通って梳かれました。
'ERRORに
focusOnSelect, true
を変更:{ "メッセージ": "キャッチされないでSyntaxError:予期しないトークン、"、 "ファイル名" "https://stacksnippets.net/js"、 "LINENO":66、 "COLNO":22 } ' 変更slidesToScroll' 'にslidesToScroll、1 ':1' – InvincibleM無駄も、もし2番目のケースだったカルーセルが機能します。 –