Q&A
http://kenwheeler.github.io/slick/
上記サイトの上から10個目の1つ1つ横のボタンでスライドするコンテンツの作成を行いたいと思い実装してみたのですが、うまく動作しません。
どこが悪くて正常に動作しないのでしょうか。
またこちらの画像がスライドする様になれば、
その下へテキストを3行ほど追加したいと考えております。
上記の件に関して、
詳しい方はご教授頂ければと思います。
以上、宜しくお願い致します。
lang
1<html> 2<head> 3<meta charset="utf-8"> 4<title>無題ドキュメント</title> 5<link rel="stylesheet" href="css/slick.css"> 6<link rel="stylesheet" href="css/slick-theme.css"> 7<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 8<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 9<script type="text/javascript" src="js/slick.min.js"></script> 10<script> 11$('.autoplay').slick({ 12 slidesToShow: 3, 13 slidesToScroll: 1, 14 autoplay: true, 15 autoplaySpeed: 2000, 16}); 17 18</script> 19<style> 20.main{ 21 width:350px; 22 margin-left:50px; 23} 24body{ 25 background-color:#9B9B9B; 26} 27</style> 28</head> 29 30<body> 31<div class="content"> 32 <div class="slider autoplay"> 33 <div><img src="http://www.placehold.it/150x300" alt="" /></div> 34 <div><img src="http://www.placehold.it/150x300" alt="" /></div> 35 <div><img src="http://www.placehold.it/150x300" alt="" /></div> 36 <div><img src="http://www.placehold.it/150x300" alt="" /></div> 37 <div><img src="http://www.placehold.it/150x300" alt="" /></div> 38 <div><img src="http://www.placehold.it/150x300" alt="" /></div> 39 <div><img src="http://www.placehold.it/150x300" alt="" /></div> 40 </div> 41</div> 42</body> 43</html> 44コード
回答3件
0
<head>の中など、処理対象の要素より上にその要素を取得する処理（この場合は$('.autoplay'）を書く場合は、ドキュメント（HTML）が読み込まれるまで待たなくてはいけません。
jQueryでは、以下のようにすることでドキュメントを読み込んだ後に実行させることができます。
javascript
1$(document).ready(function(){ 2 //実行する処理 3}); 4 5//↓これは省略した書き方です。こちらでもOK。 6$(function(){ 7 //実行する処理 8});
今回の場合は以下のように使います。
javascript
1$(function(){ 2 $('.autoplay').slick({ 3 slidesToShow: 3, 4 slidesToScroll: 1, 5 autoplay: true, 6 autoplaySpeed: 2000, 7 }); 8});
くわしくはこちらをどうぞ
http://qiita.com/8845musign/items/88a8c693c84ba63cea1d
投稿2015/07/23 04:04
編集2015/07/23 04:09
総合スコア127
0
javascript
1autoplaySpeed: 2000,
の、最後のカンマ取ってみてください。
列挙されたオプションの最後の項目にはカンマ不要です。
投稿2015/07/22 11:32
総合スコア3763
0
cssが読み込まれてません。cssファイルを読み込めば、少なくとも表示されるようにはなると思います。
下記をheadタグ内に追加してください。
lang
1<link href="./css/slick.css" rel="stylesheet" type="text/css" media="all">
なお、cssファイルまでのパスはご自身の環境に合わせてください。
投稿2015/04/28 00:47
総合スコア1698
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。