2014/11/08

[jQuery]OWL Carouselプラグイン

レスポンシブデザインに対応したカルーセルプラグインの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 コメント:

コメントを投稿