Carousel機能を実装できるSlickを試してみました
Carousel機能を実装できるSlickを試してみました。
公式サイトは以下のURLから参照できます。
公式サイト
http://kenwheeler.github.io/slick/
必要なファイルはページの下の方にあるDownload Nowボタンからダウンロードできます。
DownloadしたZipを解凍するとslickフォルダがあるのが確認できると思います。
このslickフォルダに必要なファイルが揃っているみたいです。
一番シンプルなパターンですが次のコードで動作を確認できました。
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<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>
</head>
<body>
<div class="single-item">
<div>your content 1</div>
<div>your content 2</div>
<div>your content 3</div>
</div>
<script>
$(document).ready(function(){
$('.single-item').slick();
});
</script>
</body>
</html>
これでyour content 1だけが表示されます。
サンプルのようにボタンとが表示されていませんがクリックしながら横スライドするとyour content 2やyour content 3に切り替えることができました。
ひとまず動作することは確認できたので後は公式サイトに記載されたサンプルコードを見ながらカスタマイズしていけると思います。
Author And Source
この問題について(Carousel機能を実装できるSlickを試してみました), 我々は、より多くの情報をここで見つけました https://qiita.com/tyoshikawa1106/items/2088c72209c76e4a837f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .