slider im katalog

src/main/webapp/preview/catalog.html

@@ -21,6 +21,8 @@
         <link href="css/m-light.css" rel="stylesheet">
     </noscript>
     <link href="css/custom.css" rel="stylesheet">
+    <link href="css/slick-theme.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
     <meta charset="utf-8">
@@ -47,30 +49,50 @@
     <div class="m-container">
 
         <h1 class="m-text-center">Belletristik</h1>
-        <div class="m-row">
+
+        <div class="m-row slider">
             <div class="m-col-t-4">
                 <figure class="m-figure">
                     <img src="https://source.unsplash.com/7mqsZsE6FaU/900x900" alt="Polizei Auto">
-                    <figcaption>Krimis</figcaption>
+                    <figcaption class="m-text-center">Krimis</figcaption>
                 </figure>
             </div>
             <div class="m-col-t-4">
                 <figure class="m-figure">
                     <img src="https://source.unsplash.com/eIVJAkj1uCs/900x900" alt="Glühbirne">
-                    <figcaption>Thriller</figcaption>
+                    <figcaption class="m-text-center">Thriller</figcaption>
                 </figure>
             </div>
             <div class="m-col-t-4">
                 <figure class="m-figure">
                     <img src="https://source.unsplash.com/C6CVXJMXwqs/900x900" alt="Rose">
-                    <figcaption>Liebesromane</figcaption>
+                    <figcaption class="m-text-center">Liebesromane</figcaption>
+                </figure>
+            </div>
+
+            <div class="m-col-t-4">
+                <figure class="m-figure">
+                    <img src="https://source.unsplash.com/3OiYMgDKJ6k/900x900" alt="Adventure">
+                    <figcaption class="m-text-center">Abenteuer</figcaption>
+                </figure>
+            </div>
+            <div class="m-col-t-4">
+                <figure class="m-figure">
+                    <img src="https://source.unsplash.com/RmoWqDCqN2E/900x900" alt="Weltraum">
+                    <figcaption class="m-text-center">Science & Fiction</figcaption>
+                </figure>
+            </div>
+            <div class="m-col-t-4">
+                <figure class="m-figure">
+                    <img src="https://source.unsplash.com/JKRL7ofWWAA/900x900" alt="Fantasy">
+                    <figcaption class="m-text-center">Fantasy</figcaption>
                 </figure>
             </div>
         </div>
 
         <h1 class="m-text-center">Fachbücher</h1>
 
-        <div class="m-row">
+        <div class="m-row slider">
             <div class="m-col-t-4">
                 <figure class="m-figure">
                     <img src="https://source.unsplash.com/2xU7rYxsTiM/900x900" alt="Tastatur">
@@ -89,27 +111,66 @@
                     <figcaption>Medienwissenschaften</figcaption>
                 </figure>
             </div>
+
+            <div class="m-col-t-4">
+                <figure class="m-figure">
+                    <img src="https://source.unsplash.com/gKUC4TMhOiY/900x900" alt="Microsskope">
+                    <figcaption>Naturwissenschaften</figcaption>
+                </figure>
+            </div>
+            <div class="m-col-t-4">
+                <figure class="m-figure">
+                    <img src="https://source.unsplash.com/Pz3EHf-KJfc/900x900" alt="japanische Schrift">
+                    <figcaption>Sprachen</figcaption>
+                </figure>
+            </div>
+            <div class="m-col-t-4">
+                <figure class="m-figure">
+                    <img src="https://source.unsplash.com/1HDyLnA3g8k/900x900" alt="Klippen">
+                    <figcaption>Geologie</figcaption>
+                </figure>
+            </div>
+
         </div>
 
-        <h1 class="m-text-center">Kinderbücher</h1>
+        <h1 class="m-text-center">Ratgeber</h1>
 
         <div class="m-row">
             <div class="m-col-t-4">
                 <figure class="m-figure">
                     <img src="https://source.unsplash.com/EMZxDosijJ4/900x900" alt="2 Kinder beim lesen">
-                    <figcaption>Lesen lernen</figcaption>
+                    <figcaption>Kinderbücher</figcaption>
                 </figure>
             </div>
             <div class="m-col-t-4">
                 <figure class="m-figure">
                     <img src="https://source.unsplash.com/yjXlyrKIz2A/900x900" alt="Farben">
-                    <figcaption>Malbücher</figcaption>
+                    <figcaption>Kochbücher</figcaption>
                 </figure>
             </div>
             <div class="m-col-t-4">
                 <figure class="m-figure">
                     <img src="https://source.unsplash.com/3y1zF4hIPCg/900x900" alt="Puzzle">
-                    <figcaption>Puzzle</figcaption>
+                    <figcaption>Selbsthilfe</figcaption>
+                </figure>
+            </div>
+
+            <div class="m-col-t-4">
+                <figure class="m-figure">
+                    <img src="https://source.unsplash.com/3y1zF4hIPCg/900x900" alt="Puzzle">
+                    <figcaption>Heimwerken</figcaption>
+                </figure>
+            </div>
+            <div class="m-col-t-4">
+                <figure class="m-figure">
+                    <img src="https://source.unsplash.com/3y1zF4hIPCg/900x900" alt="Puzzle">
+                    <figcaption>Computer & Internet</figcaption>
+                </figure>
+            </div>
+            <div class="m-col-t-4">
+                <figure class="m-figure">
+                    <img src="https://source.unsplash.com/3y1zF4hIPCg/900x900" alt="Puzzle">
+                    <figcaption>Reiseführer</figcaption>
                 </figure>
             </div>
         </div>
@@ -164,5 +225,19 @@
     </nav>
 </footer>
 
+
+<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+<script>
+    $(document).ready(function(){
+        $('.slider').slick({
+            infinite: true,
+            slidesToShow: 3,
+            slidesToScroll: 3
+    })
+    });
+</script>
+
 </body>
 </html>

src/main/webapp/preview/css/slick-theme.css

@@ -0,0 +1,204 @@
+@charset 'UTF-8';
+/* Slider */
+.slick-loading .slick-list
+{
+    background: #fff url('./ajax-loader.gif') center center no-repeat;
+}
+
+/* Icons */
+@font-face
+{
+    font-family: 'slick';
+    font-weight: normal;
+    font-style: normal;
+
+    src: url('./fonts/slick.eot');
+    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
+}
+/* Arrows */
+.slick-prev,
+.slick-next
+{
+    font-size: 0;
+    line-height: 0;
+
+    position: absolute;
+    top: 50%;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+
+    cursor: pointer;
+
+    color: transparent;
+    border: none;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus
+{
+    color: transparent;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before
+{
+    opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before
+{
+    opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before
+{
+    font-family: 'slick';
+    font-size: 20px;
+    line-height: 1;
+
+    opacity: .75;
+    color: white;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev
+{
+    left: -25px;
+}
+[dir='rtl'] .slick-prev
+{
+    right: -25px;
+    left: auto;
+}
+.slick-prev:before
+{
+    content: '←';
+}
+[dir='rtl'] .slick-prev:before
+{
+    content: '→';
+}
+
+.slick-next
+{
+    right: -25px;
+}
+[dir='rtl'] .slick-next
+{
+    right: auto;
+    left: -25px;
+}
+.slick-next:before
+{
+    content: '→';
+}
+[dir='rtl'] .slick-next:before
+{
+    content: '←';
+}
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dots
+{
+    position: absolute;
+    bottom: -25px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dots li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dots li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dots li button:before
+{
+    font-family: 'slick';
+    font-size: 6px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}