JQuery でスライダー その２　終了＜＝＞開始

メモ

```html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>スライダー　ケース２</title>
        <script src="/jq-plugin/jquery/jquery-1.10.2.js">
                        <!-- jquery 1.10.2 -->
        </script>
        <script>
            $(document).ready(function() {

                $.fn.slider = function(args) {
                    
                    var param = {};
                    
                    param.slider = args.slider || ".slider";
                    param.moveLeft = args.moveLeft || ".move-left";
                    param.moveRight = args.moveRight || ".move-right";
                    
                    var $this = $(this);
                    var viewpos = 0;
                    var $sliders = $this.find(param.slider);
                    
                    $sliders.each(function() {
                        $(this).css({
                            left : ($(this).index() * $(this).width())
                        });
                    });
                    $this.find(param.moveLeft).click(function() {
                        viewpos--;
                        if (viewpos < 1 - $sliders.size()) {
                            viewpos = 0;
                        }
                        $sliders.each(function() {
                            $(this).animate({
                                left : (($(this).index() + viewpos) * $(this).width())
                            }, param.speed);
                        });
                        return false;
                    });
                    $this.find(param.moveRight).click(function() {
                        viewpos++;
                        if (viewpos > 0) {
                            viewpos = 1 - $sliders.size();
                        }
                        $sliders.each(function() {
                            $(this).animate({
                                left : (($(this).index() + viewpos) * $(this).width())
                            }, param.speed);
                        });
                        return false;
                    });
                };

                // セレクタ変更
                $("#group1").slider({
                    slider : ".slider",
                    moveLeft : ".move-left",
                    moveRight : ".move-ｒｉｇｈｔ",
                    speed: 100
                });
            });
        </script>
        <style>
            ul.controller li {
                list-style: none;
                display: inline-block;
            }
            div.contents {
                width: 500px;
                height: 300px;
                border: 1px solid black;
                overflow: hidden;
                position: relative;
            }
            div.contents div {
                position: absolute;
                width: 500px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="group1">
            <ul class="controller">
                <li>
                    <a href="javascript:void(0)" class="move-left" >&lt; 右</a>
                </li>
                <li>
                    <div id="contents" class="contents">
                        <div class="slider">
                            <span>内容１</span>
                        </div>
                        <div class="slider">
                            <span>内容２</span>
                        </div>
                        <div class="slider">
                            <span>内容３</span>
                        </div>
                        <div class="slider">
                            <span>内容４</span>
                        </div>
                        <div class="slider">
                            <span>内容５</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="javascript:void(0)" class="move-ｒｉｇｈｔ" >左 &gt;</a>
                </li>
            </ul>
        </div>
    </body>
</html>
```