Added the first steps of the course selection

css/main.css

@@ -36,3 +36,22 @@ body {
   fill: none;
   stroke-width: 2px;
 }
+
+.frame { width: 100%; height: 160px; padding: 0; }
+.frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
+.frame .slidee li { float: left; margin: 0 5px 0 0; padding: 0; width: 120px; height: 100%; }
+
+.scrollbar {
+    width: 100%;
+    height: 10px; 
+    background-color: hsl(0, 0%, 94.1%);
+}
+.scrollbar .handle {
+	width: 100px; /* overriden if dynamicHandle: 1 */
+	height: 100%;
+	background: #222;
+}
+
+.slidee li {
+    border: 1px solid black;
+}

index.html

@@ -46,6 +46,34 @@
           </div>
         </form>
       </div>
+      <div class="content-box chart-box strecken-selector">
+        <div class="frame">
+	        <ul class="slidee">
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+		        <li>test</li>
+	        </ul>
+        </div>
+        <div class="scrollbar">
+	        <div class="handle"></div>
+        </div>
+      </div>
 
       <div class="content-box chart-box">
         <div id="lineGraphBox"></div>
@@ -72,6 +100,7 @@
     <script src="js/jquery/jquery-3.2.1.min.js"></script>
     <script src="js/popper/popper.min.js"></script>
     <script src="js/bootstrap/bootstrap.min.js"></script>
+    <script src="js/sly/sly.min.js"></script>
 
     <!-- D3.js and our own JavaScript
     ================================================== -->
@@ -82,5 +111,6 @@
     <script type="text/javascript" src="js/queries.js"></script>
     <script type="text/javascript" src="js/diagrams.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
+
   </body>
 </html>

js/main.js

@@ -5,6 +5,30 @@
  */
 
 preprocessor.load(function(data) {
+		var $frame  = $('.strecken-selector');
+		var $slidee = $frame.children('ul').eq(0);
+		var $wrap   = $frame.parent();
+    var options = {
+			horizontal: 1,
+			itemNav: 'basic',
+			smart: 1,
+			activateOn: 'click',
+			mouseDragging: 1,
+			touchDragging: 1,
+			releaseSwing: 1,
+			startAt: 3,
+			scrollBar: $wrap.find('.scrollbar'),
+			scrollBy: 1,
+			pagesBar: $wrap.find('.pages'),
+			activatePageOn: 'click',
+			speed: 300,
+			elasticBounds: 1,
+			dragHandle: 1,
+			dynamicHandle: 1,
+			clickBar: 1,
+    };
+    $('.frame').sly(options);
+
   // Some sample code for a year selector - TODO: Improve a lot and move somewhere else
   var yearSelector = $("#seasonByYearSelector");
   var seasons = processor.getSeasonsWithLapData();