jQueryプラグインのOwl Carouselを試してみる

JavaScript

jQueryプラグインのOwl Carouselを試してみる。

Owl Carousel
http://owlgraphic.com/owlcarousel/

※今回はバージョン1.3.2で試しました。

設置

ファイルを下記のような感じで設置。

├ HTMLファイル
├ owl.carousel.css
├ owl.carousel.min.js
├ owl.theme.css
└ img
     ├── 001.png
     ├── 002.png
     └── ・・・

基本

基本的には下記のような感じでHTMLを書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="owl.carousel.css" rel="stylesheet">
<link href="owl.theme.css" rel="stylesheet">
<script src="owl.carousel.min.js"></script>
<script>
  $(function(){
    $("#owl-demo").owlCarousel({
    });
  });
</script>
<style>
  #owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
  }
</style>
</head>
<body>
  <div id="owl-demo">
    <div class="item"><img src="img/001.png"></div>
    <div class="item"><img src="img/002.png"></div>
    <div class="item"><img src="img/003.png"></div>
    <div class="item"><img src="img/004.png"></div>
    <div class="item"><img src="img/005.png"></div>
    <div class="item"><img src="img/006.png"></div>
    <div class="item"><img src="img/007.png"></div>
    <div class="item"><img src="img/008.png"></div>
    <div class="item"><img src="img/009.png"></div>
    <div class="item"><img src="img/010.png"></div>
  </div>
</body>
</html>

デモ

スライド

singleItemをtrueにすると１枚のスライドになる。

    $("#owl-demo").owlCarousel({
      singleItem: true
    });

デモ