【初学者向け】プラグインなし。Carousel Slider 自作してみた。

カルーセルスライダーを自作しました。また初学者用に図解化してみたので是非参考にして下さい。

## 完成イメージ

![82a575a43988db6d2debfeb19731f00a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/bd827bfe-ba50-4cf0-68db-f27248013264.gif)

箱が小さくて申し訳ないのですが、こんな感じです。
ごく一般なカルーセルスライダーです。

ちなみに<font color="red">**カルーセルとスライダーの違い**</font>ですが、カルーセルは別名メリーゴーランドというのですが、簡単に言ってしまうと<font color="red">**同じところをグルグル回ってる**</font>という意味です。

対してスライダーは上下左右にスライドしていれば、それはスライダーです。

正直<font color="red">**ループするかしないかの違い**</font>で機能自体に大きな違いはなく、意味的なくくりもないみたいです。

## 下準備

準備として、以下のことをします。
※コードを書かない場合は読み飛ばして下さい。

【準備するもの】
・画像（以下にリンク貼ります）
・html/css/jsファイル（インラインで書いても良いけど分けた方がわかりやすいよ！）

階層やファイル名は以下に合わせると良いでしょう。
![スクリーンショット 2021-01-17 1.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/da95300c-d7f5-f46b-289f-e3c8b44b8a79.png)

## コーディング

### マークアップ

```html:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    <!-- Original CSS -->
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- header -->
    <header>
        <h1>Carousel Slider</h1>
        <p>center line<br>↓</p>
    </header>
    <!-- carousel slider -->
    <div class="carousel">
        <ul>
            <li><img src="./img/img1.png"></li>
            <li><img src="./img/img2.png"></li>
            <li><img src="./img/img3.png"></li>
        </ul>
        <!-- prev next button -->
        <span class="prev">←</span>
        <span class="next">→</span>
    </div>    
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- Original JS -->
    <script src="./js/main.js"></script>
</body>
</html>
```

・`GoogleFont`と`FontAwesome`はCDN書いていますが、今回は使いません。
・`JQuery`は絶対使うので最新版を入れましょう。
・`body`内の説明ですが、`headerのp`は中心が、わかりやすい様に`↓`をつけています。あとあと説明に使うのでとりあえず着けときましょう。
・`div.carousel`ですが、大きく２つのブロックに分かれいます。まず`ul`には画像を3枚並べる様に`li`を３つ並べています。あとはボタンとして`span`を２つ書いています。

![スクリーンショット 2021-01-17 2.05.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/d377a647-5688-22f9-6124-f1335f418f6f.png)

画面はこんな感じになれば良いと思います。

## レイアウト変更

次にCSSを書いていきます。ここは何回かに分けて説明します。
まず`Reset`を書き、`header`は中央寄せだけ書きます。

```css:css
@charset "utf-8";
/* Reset */
html,body,h1,p,ul,li{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
img{
    border: none;
    vertical-align: bottom;
    max-width: 100%;
} 
/* header
--------------------------------------- */
header{
    text-align: center;
}
```

![スクリーンショット 2021-01-17 2.10.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/d7677345-c744-0656-e5d2-26983a1addfe.png)

こんな感じになったかと思います。
次に、`carousel slider`部分を整えます。
まずやるべきは中央寄せです。今回は<font color="red">**ブロック要素を中央寄せなので`margin`を使えば良いですね。**</font>

```css:css(追加分のみ記載)
.carousel{
    width: 100px;
    margin: 0 auto;
}
```

![スクリーンショット 2021-01-17 2.14.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/eec6ee4b-4f0d-2fe0-aa81-1c6a7176478a.png)

こんな感じです。
ここで冒頭でも触れた、`headerのp`のセンターライン（↓）の出番です。
画像3枚がちゃんとこの、ラインのど真ん中に来てることを確認しましょう。

次に、横並べをします。
横に並べたい要素は`img`ではなく`li`なので`ul`に`flex`をかけます。
<font color="red">**※`ul`がflexコンテナ、`li`がflexアイテムです。**</font>

```css:css(追加分のみ記載)
.carousel > ul{
    display: flex;
}
```

とりあえずflexかけました。画面を確認します。

![スクリーンショット 2021-01-17 2.22.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/8285c3e8-d689-5a30-7897-82347fa2bd5f.png)

画像ちっさｗ
はい、これはflexの特性が関係してます。

flexは、flexアイテムを横並べにするのですが、<font color="red">**親要素の幅に対して均等配置する特性もあります。**</font>

つまり今回で言う親要素とは`ul`のことを指しています。そしてその`ul`の幅と言うのは、`100px`になります。

ん？と思った人もいるかも知れません、`ul`に幅指定なんかしてないのに、なぜ`100px`なのか？

初心に戻って、CSSの略称はなんだったでしょうか？<font color="red">**Cascading Style Sheets**</font>です。Cascad=滝、つまり上から下へ流れることを示しています。もっと言うと、<font color="red">**親から何かを受け継ぐ**</font>と考えても良いでしょう。

では今回は「どこから」「何を受け継いでいるか」と言うと`ul`の親である<font color="red">**`.carousel`から幅を受け継いでる**</font>と言うことになります。つまり`100px`です。

話を戻します。
クイズです。

・100px内に画像が3つ収納されています。
・画像の元々の幅は100pxです。
・元の画像サイズのまま、横に並べたいです。

どうしたら良いでしょうか・・・

答えは簡単です。flexアイテムで自動的に均等化されることは回避できないので、<font color="red">**flexコンテナ自体を大きくします。**</font>

ではどれだけ大きくするかと言うと、<font color="red">**画像の枚数分、倍にします。**</font>今回は3枚なので３倍にします。

CSSで３倍にする方法は、２通りあります。純粋に300%と書くか`calc(100% * 3)`と書くかです。
後者は一見メンドそうに見えますが、<font color="red">**おそらく玄人になればなるほど後者を選ぶでしょう。**</font>
理由は明示的に3倍してるとわかるからです。現場に出れば、複数人でコードを管理します。パッと他人のコードを見た時にどう言う意図でコードを書いたかが伝わるのは後者の気がします。

なので今回は`calc`を使います。

```css:css
.carousel > ul{
    width: calc(100% * 3);
    display: flex;
}
```

![スクリーンショット 2021-01-17 2.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/bb526509-5096-8cf6-de10-1071e8a6a6da.png)

画面はこんな感じです。
画像サイズも元通りで、横並べになりました。
ただ注目すべき点は、センターラインの位置ですね。一番最初の要素が中心にいて、そこから右に後続の要素が並んでいます。

なんか変な気がしますが、カルーセルなので問題ありません。<font color="red">**最終的にはこのセンターラインにいる要素しか表示しないので後続がどこにいようが関係ないです。**</font>

では続きを書いていきます。
次にやるべきは、ボタンを作成し、適正な位置に配置します。
まずボタンの見た目だけやります。

```css:css(追加分のみ記載)
.carousel > span{
    border-radius: 50%;
    background: orange;
    color: white;
    font-size: 30px;
}
```

![スクリーンショット 2021-01-17 2.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/b7f10e87-5a81-1955-3839-bd4ddceba297.png)

こんな感じです。難しいことはありませんね。
次に配置です。配置といえば`position`ですが、今回は<font color="red">**特定の要素を基準にして、**</font>ボタンを配置したいです。

今回の場合、特定の要素と言うのは、このカルーセル大元である`.carousel`です。

こう言った、特定の要素に対して配置をしたい場合、<font color="red">**親要素に`relative`、子要素に`absolute`を使います。**</font>

では親要素は`.carousel`、子要素は`span`とうことになるのでコードを追加していきます。

```css:css
.carousel{
    width: 100px;
    margin: 0 auto;
    position: relative;
}
.carousel > span{
    position: absolute;
    top: 50%;
    border-radius: 50%;
    background: orange;
    color: white;
    font-size: 30px;
}
.carousel > span.prev{
    left: 0;
}
.carousel > span.next{
    right: 0;
}
```

こんな感じですね。順番に解説します。
まず`.carousel`は先程も言った通り、<font color="red">**`span`の基準点にしたいので`position: relative;`をかけてます。**</font>

次に、基準点を作ったので、<font color="red">**この基準点に対して、絶対配置をおこないます。**</font>

もちろん絶対配置の対象は`span`なので`.carousel > span`に`position: absolute;`をかけています。

ただ`position: absolute;`をかけるだけだと、効力が発揮されないので、プラスアルファーとして`top: 50%;`をつけています。これは<font color="red">**親要素の50%の位置に配置することを意味しています。**</font>

そして、prevボタンは左に、nextボタンは右に配置したいので、それぞれ個別に`left: 0;`,`right: 0;`をかけています。

ここまで出来たら画面を確認します。

![スクリーンショット 2021-01-17 3.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/0255c874-9bb9-43e1-5402-b4ec01345b7a.png)

いろいろ問題がありますね・・・
２箇所あります。
まずは、ボタンの形が歪んでます。これは`absolute`の特性が関係しています。
`absolute`をかけると、`float`の様に、元居た階層から離れ(浮いてしまい)、別の階層（上の階層）に要素が移動してしまいます。と同時に<font color="red">**block要素になります。**</font>

結果から先に言うと、<font color="red">**block要素になったことで、`line-height: 1.5;`が付与されました。**</font>

`span`はインライン要素です。<font color="red">**インライン要素には`line-height: 1.0;`が初期値としてあります。**</font>

対してblock要素には、`line-height: 1.5;`が付与されています。

ここまでくるとなんとなく想像つくかと思いますが、`absolute`をかけたことで、<font color="red">**block要素になり、`line-height: 1.0;`から`1.5`になった**</font>と言うことになります。なので縦長なレイアウトになってしまったと言うことですね。

２つ目の問題として、ボタンが中央に配置されてないことですが、これは、`position`の配置方法が、<font color="red">**要素の中心ではなく、左上だからです。**</font>なので、要素の半分のサイズ分、上にズラす必要があります。

```css:css(変更セレクタ全体を記載)
.carousel > span{
    position: absolute;
    top: 50%;
    border-radius: 50%;
    background: orange;
    color: white;
    font-size: 30px;
    margin-top: -15px;
    line-height: 1.0;
}
```

これで、良い位置に配置されたかと思います。

![スクリーンショット 2021-01-17 3.42.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/b2fc155d-190c-5677-54ae-eb7aa71a1081.png)

これでレイアウト完成です！
次はJSを書いていくのですが、JSを書く上で重要なのは、<font color="red">**テストや検証をどれだけやるかです。**</font>

なので先にテストと検証をやっていきます。

### JQuery

なにをテストしていくかと言うと、今回のメイン機能である、スライドです。
まず手作業で実装したい機能を実現させます。
以下のコード2行を追加します。

```css:css
.carousel > ul{
    width: calc(100% * 3);
    display: flex;

    margin-left: -100%;
    transition: .3s;
}
```

![スクリーンショット 2021-01-17 3.52.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/4f1daae5-e5c6-3a85-2352-a9b3cfc03dab.png)

画面はこうです。今回は検証を使うので画面全体を撮ってます。
では検証の部分を見ていきます。以下の通りにしましょう。

![スクリーンショット 2021-01-17 3.54.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/416884d0-bcda-3e9f-dc1d-5c79050f1323.png)

Elementsの中から`ul`を選び、Stylesの中から指定のポイントをクリックします。
以下の動画を見ながらやっってみて下さい。

![8595d80412cecc95b0144963eb0996ec.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/4c843ed0-d89b-71db-93cc-dec36573dee8.gif)

`margin-left: -100%;`についてる、チェックボックスをつけたり消したりすることで、擬似的にスライダーを実装することが出来ます。

<font color="red">**これは検証ツール上でCSSのオンオフが出来ることを利用した手法です。**</font>
この様に、目的を明確にする為に検証ツールは使うべきです。

さて、話を戻しますが、ここまでやって、`margin-left: -100%;`をつけたり消したりすることで、スライダー実装することが出来ることがわかりました。なのでこれをJSに落とし込みます。

では機能の概要はなんとなくわかりました。「●●をしたらxxをする」と言うのがJSイベントの基本なのですが、●●とxxなにが当てはまるでしょうか？

スライダーなので「ボタンを押したらスライドする」がただしそうですが、いまいち具体性にかけます。とはいえ考えても進まないので、今言った<font color="red">**「ボタンを押したらスライドする」**</font>をコードに落とし込みます。

```javascript:main.js
$(function(){
  $('.carousel > span').on('click', function(){
    console.log($(this));
  });
});
```

こんな感じです。これも鉄則ですが、<font color="red">**必ず１手順づつ`console`で確認しましょう。**</font>

ここで`console`することで、<font color="red">**このクリックイベントは動くことを証明出来る**</font>ので後々エラーになった場合に、エラー原因の候補から外れます。
ではボタンクリックで`console`ログを確認します。

![スクリーンショット 2021-01-17 4.19.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/6c0d8682-eaeb-2f1e-fb41-5220a9c6fac1.png)

この様に、prevを押したら`span.prev`がnextを押したら`span.next`が`console`ログに表示されましたか？

`$(this)`と言うのは、<font color="red">**自身の要素**</font>と言う意味があり、今回の場合イベントの発火元を`$('.carousel > span')`と曖昧なセレクタしています。

`$('.carousel > span')`は`next`と`prev`の２つ存在することは理解できるかと思います。
ただしどちらがクリックされるかはわからないので、あえて`$('.carousel > span')`とすることで、<font color="red">**どちらがクリックされてもイベントが発火する様な設計になっています。**</font>

ただ`prev`と`next`で別々の動きをするので`$(this)`を使用することで、<font color="red">**クリックされた要素のみを取得できる様にしてます。**</font>

では次に、処理を分岐させましょう。
当たり前ですが、まず`console`ログで確認します。
コードとしてはif文を使います。`prev`が押されたら`左`、`next`が押されたら`右`と表示します。

```javascript:main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      console.log('左');
    } else{
      console.log('右');
    }
  });
});
```

![スクリーンショット 2021-01-17 4.35.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/e2a2adfa-d1c1-21c7-6689-db79d2b3afb3.png)

こんな感じで、ボタンを押した分`console`ログに表示されます。
ここで注意したいのが、右と左がちゃんとボタンの向きとマッチしてるか確認します。左右を逆転して書いてしまうことはありがちです。<font color="red">**ここで不穏因子は徹底的に排除しましょう。**</font>

ここから本番です。先程検証ツールを使って手動でスライド実装した時のコードが残ってます、まずこれを消しましょう。

```css:css
.carousel > ul{
    width: calc(100% * 3);
    display: flex;

    /* margin-left: -100%;
    transition: .3s; */
}
```

これが出来たら、消した2行と同じ意味を持つ、JSのコードを書いていきましょう。

```javascript:main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      console.log('左');
      $('.carousel > ul').animate({'margin-left':'-100%'}, 1000);
    } else{
      console.log('右');
    }
  });
});
```

![e1533bd37a21ddcabd044585ccd20c91.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/e2bfd499-77c2-e8a0-af09-bc9bec3ab028.gif)

この様に動けば良いかと。
ただし現状問題があります。これは<font color="red">**左ボタンを押したら、左に要素１つ分スライドする**</font>と言うコードなのですが、逆に言うと<font color="red">**元いた位置から、１つ分以上動けない**</font>と言うことになります。

実際にやってみると、何度クリックしても最初の1回以上は動かないはずです。
ではどうするか、一旦の打開策として`margin-left: 0;`を続けてかけてみましょう。

```javascript:main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      console.log('左');
      $('.carousel > ul').animate({'margin-left':'-100%'}, 1000, function(){
        $('.carousel > ul').css('margin-left', '0');
      });
    } else{
      console.log('右');
    }
  });
});
```

ここでポイントがあります。`animate関数`に続けて、処理を書く場合は、上記の様に<font color="red">**関数をネスト化する必要があります。**</font>
かなり複雑な書き方ですが、正直慣れなので今は我慢しましょう。

では動きを確認します。

![709b316078a35ca6d525e6f7da829919.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/3fe8f1df-f73d-011c-7470-d4fded1acc04.gif)

無限にクリックできる様になったのですが、毎回初期の位置に戻ってしまいます。
次はこれを解決する方法を考えましょう。
ちょっと難しいのですが、カルーセル自体がループするものなので、移動した要素、末尾に配置すれば解決します。

```javascript:main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      console.log('左');
      $('.carousel > ul').animate({'margin-left':'-100%'}, 1000, function(){
        $('.carousel > ul').css('margin-left', '0');
        $('.carousel > ul').append($('.carousel > ul > li:first-child'));
      });
    } else{
      console.log('右');
    }
  });
});
```

こんな感じです。順に解説します。
まず<font color="red">**セレクタ末尾に追加するメソッドとして、`.append()`があります。**</font>これは既存の要素、今回であれば`li`ですが、既存要素があれば動作的には<font color="red">**追加ではなくカット＆ペーストになります。**</font>

つまり`.animate()`で左にズレたと同時に、<font color="red">**先頭の`li`をカット、末尾にペーストしてます。**</font>

そして重要なのが、先頭がカットされ、末尾に追加されたと言うことは、元いた位置から<font color="red">**押し出しで２つ分移動した**</font>と言うことになります。

そして、`margin-left: 0;`を追加した時の挙動を思い出して欲しいのですが、左にスライドしたと思ったら<font color="red">**瞬間的に右に移動**</font>しましたよね？

これを合わせることで、<font color="red">**２つ左に移動して、右に１つ移動**</font>した結果、左に１つスライドした、となります。

ここら辺はややこしいので、図解化したので合わせてみて下さい。

![カルーセル1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/a8ff900a-b95f-7965-ea92-2ae4dd938af8.jpeg)

![カルーセル2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/374ebca1-e027-2204-3956-76a9add4c335.jpeg)

![カルーセル3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/cc08d3b6-d979-7022-e13a-c07e41b82d8a.jpeg)

では動作を確認します。

![2c6ec8246a0e0251a6d648de42fd8f79.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/2e197606-e11f-39b4-f803-a8cb797119bc.gif)

こんな感じでループが組めたら左側は完成です。
右側は左とおんなじ様なロジックで出来てるので自身で解読してみて下さい。以下に完成形コード載せときます。
※`console.log`は邪魔なので消しました。

```javascript:main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      $('.carousel > ul').animate({'margin-left':'-100%'}, 1000, function(){
        $('.carousel > ul').css('margin-left', '0');
        $('.carousel > ul').append($('.carousel > ul > li:first-child'));
      });
    } else{
      $('.carousel > ul').prepend($('.carousel > ul > li:last-child'));
      $('.carousel > ul').css('margin-left', '-100%');
      $('.carousel > ul').animate({'margin-left':'0'}, 1000);
    }
  });
});
```

### 仕上げ

ではJSが完成したところで仕上げと行きます。
現状全ての`li`要素が剥き出しになっているので、センターラインのエリアのみ表示できる様にしましょう。

```css:css
.carousel{
    width: 100px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
```

大元の親要素`.carousel`に`overflow: hidden;`をかけるだけです。`.carousel > ul`に`width: calc(100% * 3);`をかけていて、親要素からはみ出る様に設計したので、<font color="red">**はみ出た分を隠すCSSを適用させます。**</font>

これで目的通り、Carousel Sliderの完成です！

## まとめ

長時間ありがとうございました。作成に8時間もかかってしまいました😅
ただ機能と言うよりは、<font color="red">**開発までの工程**</font>を学んで欲しくて、ひたすらに書き続けました。8時間あっという間でした。

将来的にマネジメント・教育する立場になりたいと思っております。もし何かご意見、修正等あれば遠慮なくどうぞ！

## 2021/1/17追記

imgサイズどのサイズにも対応できる様に、cssを追記。

```css:css
@charset "utf-8";
/* Reset */
html,body,h1,p,ul,li{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
img{
    border: none;
    vertical-align: bottom;
    max-width: 100%;
} 
/* header
--------------------------------------- */
header{
    text-align: center;
}
/* carousel slider
--------------------------------------- */
.carousel{
    /* ここの幅、高さを変える事でどのサイズにも対応させることが可能。imgのサイズ指定は不要。 */
    width: 100%;
    height: 50vh;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.carousel > ul{
    width: calc(100% * 3);
    display: flex;
}
.carousel > ul > li{
    width: calc(100% / 3);
}
.carousel img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* prev next button */
.carousel > span{
    position: absolute;
    top: 50%;
    border-radius: 50%;
    background: orange;
    color: white;
    font-size: 30px;
    margin-top: -15px;
    line-height: 1.0;
}
.carousel > span.prev{
    left: 0;
}
.carousel > span.next{
    right: 0;
}
```

・冗長なセレクタを変数化。
・自動実行コードを追加。

```js:main.js
$(function(){
  let carUl = $('.carousel > ul');
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      carUl.animate({'margin-left':'-100%'}, 1000, function(){
        carUl.css('margin-left', '0');
        carUl.append($('.carousel > ul > li:first-child'));
      });
    } else{
      carUl.prepend($('.carousel > ul > li:last-child'));
      carUl.css('margin-left', '-100%');
      carUl.animate({'margin-left':'0'}, 1000);
    }
  });
  // 自動実行
  setInterval(function(){
		$('.carousel > span.next').click();
	},3000);
});
```