レスポンシブデザインに対応したカルーセルプラグインのOWL Carouselを試してみた。
まずは、DLしたCSSとjsをインクルード
<link rel="stylesheet" href="../owl.carousel/owl-carousel/owl.carousel.css"> <link rel="stylesheet" href="../owl.carousel/owl-carousel/owl.theme.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="../owl.carousel/owl-carousel/owl.carousel.js"></script>次にHTMLを作成
<div id="owl-example" class="owl-carousel"> <div> Your Content 1</div> <div> Your Content 2</div> <div> Your Content 3</div> <div> Your Content 4</div> <div> Your Content 5</div> <div> Your Content 6</div> <div> Your Content 7</div> </div>最後にjsをコール
<script> jQuery(function($){ $("#owl-example").owlCarousel({ }); }); </script>実は、これだけで動いちゃうのです。
素晴らしいですね。
0 コメント:
コメントを投稿