Angular slider

by Alexey Zuev

HTML

<div ng-app>
    <div id="slider" ng-controller="MySlider">
        <div id="slides">
            <div class="overflow">
                <div id="slide-show" class="inner">
                    <div class="page">
                        <div class="title-slides"> <span class="title">Cougar</span>

                        </div>	<a href="">
                        <img src="http://lorempixel.com/400/200/animals" alt="Images №1">
						</a>

                    </div>
                    <div class="page">
                        <div class="title-slides">	<span class="title">Lions</span>

                        </div>
                        <img src="http://lorempixel.com/400/200/animals?v=2" alt="Images №2">
                    </div>
                    <div class="page">
                        <div class="title-slides">	<span class="title">Snow Leopard</span>

                        </div>
                        <img src="http://lorempixel.com/400/200/animals?v=3" alt="Images №3">
                    </div>
                    <div class="page">
                        <div class="title-slides">	<span class="title">Wolf</span>

                        </div>
                        <img src="http://lorempixel.com/400/200/animals?v=4" alt="Images №4">
                    </div>
                    <div class="page">
                        <div class="title-slides">	<span class="title">Crocodile</span>

                        </div>
                        <img src="http://lorempixel.com/400/200/animals?v=5" alt="Images №5">
                    </div>
                </div>
            </div>
        </div>
        <input type="button" id="next" value="next" ng-click="next()">
        <input type="button" id="prev" value="prev" ng-click="prev()">
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}
#slider {
    width: 90%;
    height: 90%;
    margin: 0 auto;
    position: relative;
}
#slides {
    background: #fff;
    padding: 5px;
    box-shadow: 2px 2px 4px #333, inset 1px 1px 0 #ddd;
    border-radius: 5px;
}
.inner {
    width: 500%;
}
.inner:after {
    content:"";
    display: block;
    height: 0;
    clear: both;
}
.page {
    float: left;
    width: 20%;
    position: relative; /* this */
}
.page img {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: auto;
    width: 100%;
}
.overflow {
    overflow: hidden;
}

 .title-slides {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    /*height: 60px;*/
    position: absolute;
    z-index: 1;
    top:0;
    left: 0;
    opacity: 0.8;
}
.title {
    color: #fff;
    font-size: 24px;
    font-weight: 30px;
    line-height: 60px;
    padding: 10px 0 10px 20px;
}

input[value="prev"],
input[value="next"] {
    position: absolute;
    opacity: 0;
    top: 5px;
    bottom: 5px;
    width: 50%;
    background: rgba(0,0,0,.5);
    color: #fff;
    border: none;
    outline: none;
}
input[value="next"] {
    right: 5px; 
}
input[value="prev"] {
    left: 5px;
}
input[value="prev"]:hover,
input[value="next"]:hover {
    opacity: 1;
}

JavaScript

function MySlider($scope) {
    var i = 0;

    var length = document.getElementById("slide-show").children.length;
    $scope.next = function () {

        i++;

        if (i < length) {
            var left = i * 100;
            document.getElementById("slide-show").style.marginLeft = "-" + left + "%";
            document.getElementById("prev").style.visibility = "visible";
            if (i === (length - 1)) {
                document.getElementById("next").style.visibility = "hidden";
            }
        }
    }

    $scope.prev = function () {
        i--;

        if (i < length) {
            var left = i * 100;
            document.getElementById("slide-show").style.marginLeft = "-" + left + "%";
            document.getElementById("next").style.visibility = "visible";
            // alert("prev="+i);
            if (i === 0) {
                document.getElementById("prev").style.visibility = "hidden";
            }
        }
    }
}