ng-carousel/example.html at master · zbert/ng-carousel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE HTML>
<html ng-app='example'>
  <head>
  <title>Angular Carousel Example</title>

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    .carousel-container {
      overflow: hidden;
      height: 500px;
      width: 600px;
    }
    .carousel-belt {
      transition: all .3s ease-in-out;
    }
    .arrow {
      display: inline-block;
      cursor: pointer;
      width: 30px;
      height: 30px;
      font-size: 30px;
    }

    .carousel-item {
      float: left;
    }

    .carousel-item:nth-child(1) {
      background: #eee;
    }
    .carousel-item:nth-child(2) {
      background: #ddd;
    }
    .carousel-item:nth-child(3) {
      background: #aaa;
    }
    .carousel-item:nth-child(4) {
      background: #bbb;
    }
  </style>
</head>

<body>

<div class='carousel-container' data-angular-carousel data-arrow-threshold='2' data-views-per-slide='3'>
  <div class='carousel-belt'>
    <div class='carousel-item'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore explicabo distinctio natus! Deleniti laboriosam animi, temporibus illum aliquam eos recusandae nihil, accusantium vel omnis impedit aspernatur autem vero distinctio repellendus.</div>
    <div class='carousel-item'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio inventore ipsa totam recusandae earum atque, cupiditate minima odit voluptates nihil. Tempore voluptas magnam, autem ipsum provident ab dolor maxime corrupti.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione sapiente praesentium, perspiciatis mollitia. Nemo, quisquam velit voluptatum culpa dolorem iure, aspernatur eum corrupti cupiditate ea odit quaerat inventore ducimus dolore!</div>
    <div class='carousel-item'> sit amet, consectetur adipisicing elit. Enim officia quam sequi ipsam laudantium assumenda, harum ducimus nam omnis, et saepe. Ad quibusdam dolorum repudiandae corrupti accusantium quasi impedit? Officia!</div>
    <div class='carousel-item'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos, incidunt veniam ipsum velit voluptate dolore culpa at deserunt, ad perferendis ullam itaque, iste, fugit animi repudiandae obcaecati reiciendis error.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut veniam ad quo assumenda vero, nam voluptate molestiae accusantium hic qui enim nemo maiores in impedit quae sit. Fugit, sit, dolorem!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur aut temporibus, quia earum sint tempore aspernatur nihil dolores similique quas, nam doloribus doloremque labore! Rem ea magni, quaerat. Iusto, quia.</div>
  </div>

  <a class='arrow arrow-left'><i class='fa fa-angle-left'></i></a>
  <a class='arrow arrow-right'><i class='fa fa-angle-right'></i></a>
</div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.21/angular.js"></script>
<script src='angular-carousel.js'></script>

<script>
  var app = angular.module('example', ['angular-carousel']);
</script>
</body>
</html>