simple-carousel/carousel-simplest.html at master · chermanarun/simple-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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Carousel - simplest version</title>
  <link rel="stylesheet" type="text/css" href="furniture.css">
  <style type="text/css">
    .carouselbox {
      font-family: helvetica,sans-serif;
      font-size: 14px;
      width: 100px;
      position: relative;
      margin: 1em;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 10px #ccc;
      overflow: hidden;
    }
    .content {
      margin: 0;
      padding: 0;
    }
    .content li {
      font-size: 100px;
      margin: 0;
      padding: 0;
      width: 100%;
      list-style: none;
      text-align: center;
      z-index: 2;
    }
    .active {
      height: 130px;
    }
    .active li {
      position: absolute;
      top: 200px;
    }
    .active li.current {
      top: 30px;
    }
    .buttons {
      display: none;
    }
    .active .buttons {
      display: block;
      padding: 5px 0;
      background: #eee;
      text-align: center;
      z-index: 10;
      position: relative;
    }
    .carouselbox button {
      border: none;
      visibility: hidden;
    }
    .active button {
      visibility: visible;
    }
    .offscreen {
      position: absolute;
      left: -2000px;
    }
  </style>
</head>

<body>
<div class="carouselbox">
  <div class="buttons">
    <button class="prev">
       ◀ <span class="offscreen">Previous</span>
    </button>
    <button class="next">
      <span class="offscreen">Next</span> ▶
    </button>
  </div>
  <ol class="content">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ol>
</div>

<nav>
  <ul>
    <li><a href="carousel-noscript.html">Plain HTML carousel structure</a></li>
    <li><a href="carousel-css-only.html">Styled and ready carousel</a></li>
    <li><strong>Simplest possible carousel</strong></li>
    <li><a href="carousel-fancy.html">Fancier carousel</a></li>
    <li><a href="carousel-progressive-enhancement.html">Capability testing</a></li>
    <li><a href="carousel-pointer-events.html">CSS Pointer events fix</a></li>
    <li><a href="carousel-images.html">Carousel with images</a></li>
    <li><a href="https://github.com/codepo8/simple-carousel">View Source on GitHub</a></li>
  </ul>
</nav>

<script>

carousel = (function(){

  // Read necessary elements from the DOM once
  var box = document.querySelector('.carouselbox');
  var next = box.querySelector('.next');
  var prev = box.querySelector('.prev');

  // Define the global counter, the items and the
  // current item
  var counter = 0;
  var items = box.querySelectorAll('.content li');
  var amount = items.length;
  var current = items[0];

  box.classList.add('active');

  // navigate through the carousel

  function navigate(direction) {

    // hide the old current list item
    current.classList.remove('current');

    // calculate th new position
    counter = counter + direction;

    // if the previous one was chosen
    // and the counter is less than 0
    // make the counter the last element,
    // thus looping the carousel
    if (direction === -1 &&
        counter < 0) {
      counter = amount - 1;
    }

    // if the next button was clicked and there
    // is no items element, set the counter
    // to 0
    if (direction === 1 &&
        !items[counter]) {
      counter = 0;
    }

    // set new current element
    // and add CSS class
    current = items[counter];
    current.classList.add('current');
  }

  // add event handlers to buttons
  next.addEventListener('click', function(ev) {
    navigate(1);
  });
  prev.addEventListener('click', function(ev) {
    navigate(-1);
  });

  // show the first element
  // (when direction is 0 counter doesn't change)
  navigate(0);

})();


</script>
</body>
</html>