Added new Logic to position image which fixes the z-index problem.

Added Start/Stop Buttons
Added css reset for resizing the window
Added transition reset for resizing and page loading

TODO Selector configuration for easier implementation

bannerslider.js

@@ -1,22 +1,42 @@
 /**
- *
+ * SIMON GEHRIGs Slider
  */
+
+
+/*
+ *
+ * CONFIGURATION
+ *
+ * */
+slider_aspect = 16 / 10;
+//TODO Selectors for Bannergroup & Banneritems + add Bannergroup & -item classes
+/*
+ *
+ * END CONFIGURATION
+ *
+ * */
+
+
+// Global Variables
+msie = window.navigator.userAgent.indexOf("msie ");
 activeitem = 0;
 
-// WHEN DOCUMENT IS LOADING
-(function ($) {
-
-    // TODO Trigger Prepare Function
-    // TODO Write Prepare Function
-
-})(jQuery);
-
 
 // WHEN DOCUMENT IS READY
 (function ($) {
     $(document).ready(function () {
-        maintenance();
+
-        maintenance();
+        notransitions();
+
+        order(activeitem);
+
+        start();
+
+        if (msie) {
+            order(activeitem);
+        }
+
+        yestransitions();
     })
 })(jQuery);
 
@@ -24,8 +44,15 @@ activeitem = 0;
 // IF WINDOW GETS RESIZED
 (function ($) {
     $(window).resize(function () {
+
         resetcss();
-        maintenance();
+
+        notransitions();
+
+        order(activeitem);
+
+        yestransitions();
+
     })
 })(jQuery);
 
@@ -33,7 +60,7 @@ activeitem = 0;
 // LIST OF ALL FUNCTIONS TRIGGERED ABOVE
 function maintenance() {
     Dimensions();
-    banner();
+    banner(activeitem);
 }
 // -----------------------------------------
 
@@ -48,22 +75,20 @@ function Dimensions() {
         banneroffset = null;
 
         // Get jQuery Objects
+        bannergroup = '';
         bannergroup = $('.bannergroup');
-        banneritem = $('.banneritem');
 
-        // TODO Reset the CSS Properties
+        banneritems = '';
-        banneritem.css({
+        banneritems = $('.banneritem');
-            width: '',
-            height: '',
-            left: ''
-        });
 
         bannergroupwidth = bannergroup[0].clientWidth;
-        banneritemwidth = banneritem[0].clientWidth;
+        banneritemwidth = banneritems[0].clientWidth;
+        //bannergroupwidth = bannergroup[0].width();
+        //banneritemwidth = banneritems[0].width();
 
         // CALCULATE BANNER DIMENSIONS
-        bannerheight = banneritemwidth / 1.5;
+        bannerheight = banneritemwidth / slider_aspect;
-        banneroffset = (bannergroupwidth-banneritemwidth)/2;
+        banneroffset = (bannergroupwidth - banneritemwidth) / 2;
 
     })(jQuery);
 
@@ -84,9 +109,10 @@ function banner(activeitem) {
         // Get the Control Elements
         bannerjump_wrapper = $('.bannerjump-wrapper');
         bannercontrols = $('.bannercontrols');
+        bannerautoplay = $('.bannerautoplay');
 
         // Make the banner arraylength more comfortable to calculate in the loop
-        bannerarraylength = banneritem.length - 1;
+        bannerarraylength = banneritems.length - 1;
 
         // -----------------------------------------------------------------------
         // HTML
@@ -96,16 +122,42 @@ function banner(activeitem) {
         // ------------------------------------------------------------------------
         bannerjump_wrapper.detach();
         bannercontrols.detach();
+        bannerautoplay.detach();
 
         // ADD THE CONTROLS
         // ------------------------------------------------------------------------
         // ADD the Jumper-wrapper
         bannergroup.append("<div class='bannerjump-wrapper'></div>");
-
+        // TODO Jumps to <a>-top by clicking left/right arrows
-        // ADD the left/right controls
+        // ADD the left/right start/stop controls
         bannergroup
             .append(
-                "<div class='bannercontrols'><a class='right' onclick='scrollL()' href='#'><div class='iconwrapper'><span class='circle'><span class='arrow'></span></span></div></a> <a class='left' onclick='scrollR()' href='#'><div class='iconwrapper'><span class='circle'><span class='arrow'></span></span></div></a></div>");
+                "<div class='bannerautoplay'>" +
+                "<a class='pause' onclick='pause()'></a>" +
+                "<a class='play' onclick='play()'></a> " +
+                "</div> " +
+                "" +
+                "<div class='bannercontrols'>" +
+                "" +
+                "<a class='right' onclick='buttonL()' href='#'>" +
+                "<div class='iconwrapper'>" +
+                "<span class='circle'>" +
+                "<span class='arrow'>" +
+                "</span>" +
+                "</span>" +
+                "</div>" +
+                "</a>" +
+                "" +
+                "<a class='left' onclick='buttonR()' href='#'>" +
+                "<div class='iconwrapper'>" +
+                "<span class='circle'>" +
+                "<span class='arrow'>" +
+                "</span>" +
+                "</span>" +
+                "</div>" +
+                "</a>" +
+                "" +
+                "</div>");
 
 
         // SET BANNER DIMENSIONS
@@ -113,11 +165,7 @@ function banner(activeitem) {
         bannergroup.css({
             height: bannerheight
         });
-        $('.banneritem, .banneritem iframe').css({
+
-            width: banneritemwidth,
-            height: bannerheight,
-            left: banneroffset
-        });
         $('.banneritem a').css({
             width: banneritemwidth,
             height: bannerheight
@@ -162,61 +210,31 @@ function banner(activeitem) {
             "z-index": "10000"
         });
 
+
         // SET THE BANNERITEMS'POSITIONS
         // --------------------------------------------------------------
 
 
         // LOOP THROUGH ALL ITEMS
-        // ----------------------------------------------------------------------
         for (var $i = 0; $i <= (bannerarraylength); $i++) {
 
-            $banneritem_nth = $('.banneritem:nth-of-type(' + ($i + 1) + ')');
-
-            // GET the image height of the specific image
-            $imageheight = $banneritem_nth
-                .height();
-
-
             // LOGIC TO POSITION THE IMAGES
             //
 
-            // IF THE FIRST SLIDER IS ACTIVE, THE LAST ONE GETS SET
+            $banneritemnr = $i;
-            // IN FRONT OF IT
+            $posnr = orderarray[$i];
-            if (parseInt($i) == parseInt(bannerarraylength)
-                && activeitem == 0
-                && parseInt(bannerarraylength) != 0) {
-                // put it on the right side
-                $left = banneroffset + banneritemwidth;
-            }
-            // IF THE LAST SLIDER IS ACTIVE, THE FIRST ONE GETS SET AFTER IT
-            else if ($i == 0
-                && activeitem == bannerarraylength
-                && bannerarraylength != 0) {
-                // put it on the left side
-                $left = -1 * (banneritemwidth - banneroffset);
-            }
-            // IN ANY OTHER CASE, LINE THEM UP AROUND THE ACTIVE ELEMENT
-            else {
-                $activeoffset = activeitem - $i;
-                $timesthebanner = banneritemwidth * $activeoffset;
-                $left = $timesthebanner + banneroffset;
-            }
 
+            $banneritem = $(".banneritem:eq(" + $banneritemnr + ")");
 
-            // SET THE VALUES CALCULATED IN THE LOGIC
+            $posoffset = activepos - 1 - $posnr;
-            $banneritem_nth.css({
-                "left": $left,
-                "width": banneritemwidth,
-                "height": bannerheight
-                //"opacity": 1
-            });
 
+            $left = ($posoffset * banneritemwidth) + banneroffset;
 
+            // Get optional for styling
             if (activeitem == $i) {
                 $state = "active";
                 $removal = "inactive";
             }
-            //TODO Calculate how many pictures can be seen
             else if ((activeitem - 1) == $i || activeitem + 1 == $i) {
                 $state = "inactive visible";
                 $removal = "active";
@@ -234,12 +252,16 @@ function banner(activeitem) {
                 $removal = "active visible";
             }
 
-            $banneritem_nth.addClass($state);
+            // SET THE VALUES CALCULATED IN THE LOGIC
-            $banneritem_nth.removeClass($removal);
+            $banneritem.css({
+                "left": $left,
+                "width": banneritemwidth,
+                "height": bannerheight
+            });
+
+            $banneritem.addClass($state);
+            $banneritem.removeClass($removal);
 
-            //$('.banneritem:nth-of-type(' + ($i + 1) + ') img').css({
-            //    "top": (bannerheight - $imageheight) / 2
-            //})
             if (bannerarraylength > 0) {
                 // CONSTRUCT THE JUMP-ICONS
                 $('.bannerjump-wrapper').prepend(
@@ -267,30 +289,87 @@ function banner(activeitem) {
 
 function resetcss() {
 
+    bannercontrols_left.css({
+        left: '',
+        top: '',
+        width: '',
+        height: '',
+    });
+    bannercontrols_right.css({
+        left: '',
+        top: '',
+        width: '',
+        height: '',
+    });
+    $('.banneritem a').css({
+        width: '',
+        height: ''
+    });
+    banneritems.css({
+        left: '',
+        width: '',
+        height: ''
+    });
+    //banneritems.attribute('style','');
+    //bannergroup.attr('style','');
+}
+
+function pause() {
+    // Pause Button Press
+    if (typeof bannerautoslide !== 'undefined') {
+        window.clearInterval(bannerautoslide);
+    }
+}
+function play() {
+    // Play Button Press
+    scrollL();
+    start();
+}
+function start() {
+    //if (typeof bannerautoslide == 'undefined') {
+    // Scroll on Time
+    pause();
+    bannerautoslide = window.setInterval(function () {
+        scrollL();
+    }, 7500);
+    //}
 }
 
 // jump to specific Banneritem
 function jump($activeitem) {
     (function ($) {
+
         // STOP autoslider
-        clearInterval(bannerautoslide);
+        pause();
+
         // JUMP to chosen Item
-        banner($activeitem);
+        activeitem = $activeitem;
+        order(activeitem);
     })(jQuery);
 }
 
+function buttonL() {
+    pause();
+    scrollL();
+}
+function buttonR() {
+    pause();
+    scrollR();
+}
+
 // Scroll through the Banneritems
 // to the left
 function scrollL() {
     (function ($) {
+
         // GET Number of Items in the bannergroup
         activeitem++;
 
-        if (activeitem >= banneritem.length) {
+        if (activeitem >= banneritems.length) {
-            activeitem = activeitem - banneritem.length;
+            activeitem = activeitem - banneritems.length;
         }
 
-        banner(activeitem);
+        order(activeitem);
     })(jQuery);
 }
 
@@ -301,16 +380,43 @@ function scrollR() {
         activeitem--;
 
         if (activeitem < 0) {
-            activeitem = activeitem + banneritem.length;
+            activeitem = activeitem + banneritems.length;
         }
 
-        banner(activeitem);
+        order(activeitem);
     })(jQuery);
 }
 
-// Scroll on Time
-var bannerautoslide = setInterval(function () {
-    scrollL();
-}, 7500);
-
 // TODO Set images as background-images
+
+function order($item) {
+    //if ($item != null) {
+    //    activeitem = 0;
+    //}
+
+    banneritems = $('.banneritem');
+    orderarray = new Array();
+
+    // Calculate the center Position
+    activepos = Math.round(banneritems.length / 2);
+
+    for (i = 0; i < banneritems.length; i++) {
+        orderarray[i] = i;
+    }
+    for (j = 0; j < activepos + activeitem; j++) {
+        orderarray.unshift(orderarray.pop());
+    }
+    maintenance();
+}
+
+function notransitions() {
+    $('.bannergroup *').css({
+        transition: "none"
+    })
+}
+
+function yestransitions() {
+    $('.bannergroup *').css({
+        transition: ""
+    })
+}

slider.html

@@ -20,14 +20,14 @@
             <img src="https://unsplash.it/750/500/?random">
             <!--<img src="http://lorempixel.com/750/500/">-->
             <a href="#">
-                <div class="bannertext">Dies ist ein Text.</div>
+                <div class="bannertext">Fotos von unsplash.it.</div>
             </a>
         </div>
         <div class="banneritem">
             <img src="https://unsplash.it/750/501/?random">
             <!--<img src="http://lorempixel.com/750/501/">-->
             <a href="#">
-                <div class="bannertext">Dies ist ein Text.</div>
+                <div class="bannertext">Dies ist ein längerer Text.</div>
             </a>
         </div>
         <div class="banneritem">
@@ -41,12 +41,24 @@
             <img src="https://unsplash.it/750/503/?random">
             <!--<img src="http://lorempixel.com/750/503/">-->
             <a href="#">
-                <div class="bannertext">Dies ist ein Text.</div>
+                <div class="bannertext">Wort.</div>
+            </a>
+        </div>
+        <div class="banneritem">
+            <img src="https://unsplash.it/750/504/?random">
+            <!--<img src="http://lorempixel.com/750/503/">-->
+            <a href="#">
+                <div class="bannertext">Simon hat das geschrieben.</div>
             </a>
         </div>
     </div>
     <div class="text">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+        takimata sanctus est Lorem ipsum dolor sit amet.
     </div>
 </div>
 <footer>

slider.scss

@@ -7,13 +7,13 @@
 $base-size: 14px;
 $smaller-size: $base-size*0.66;
 
-$slider_width:100%;
+$slider_width: 100%;
-$slider_item_width:20%;
+$slider_item_width: 61.8%;
 
 $font__main: Calibri, sans-serif;
 
-$highlight-color-1: #3a9985;
+$highlight-color-1: #333333;
-$highlight-color-2: #d38b71;
+$highlight-color-2: #eeeeee;
 
 $text-color: #ffffff;
 $base-color: #ffffff;
@@ -35,7 +35,7 @@ header {
     display: block;
     font-size: 100px;
     font-weight: 700;
-    padding:25px 50px!important;
+    padding: 25px 50px !important;
     color: $base-color;
     text-transform: uppercase;
   }
@@ -74,6 +74,8 @@ footer {
   }
 }
 
+// SLIDER CSS
+
 div.bannergroup {
   width: $slider_width;
   position: relative;
@@ -83,16 +85,203 @@ div.bannergroup {
   overflow: hidden;
   background-color: $base-color;
 
-  &:after {
+  // Bottom Background Image
-    content: ' ';
+  //&:after {
-    //background-image: url($img-dir + "/wave.png");
+  //  content: ' ';
+  //  //background-image: url($img-dir + "/wave.png");
+  //  position: absolute;
+  //  height: 100px;
+  //  width: 100%;
+  //  bottom: 0;
+  //  background-position: bottom;
+  //  background-size: 100%;
+  //  background-repeat: no-repeat;
+  //}
+
+  .banneritem {
     position: absolute;
-    height: 100px;
+    overflow: hidden;
+    width: $slider_item_width;
+
+    padding: 0 !important;
+    transition: all 2s ease 0s;
+
+    &.active {
+      z-index: 100;
+      opacity: 1;
+
+      img {
+        -ms-filter: none;
+        filter: none;
+        transform: scale(1);
+      }
+    }
+
+    &.inactive {
+      z-index: 90;
+      opacity: 1;
+
+      &.visible {
+        z-index: 95;
+      }
+
+      img {
+        -webkit-filter: blur(1px);
+        -ms-filter: blur(1px);
+        filter: blur(1px) !important;
+
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1);
+      }
+    }
+
+    img {
+      vertical-align: middle !important;
       width: 100%;
+      transition: all 0.2s ease 0s;
+
+      &.portrait {
+        width: 100%;
+        height: auto;
+      }
+      &:before {
+        content: "";
+        display: block;
+        padding-top: 42.5532%; /* initial ratio of 47:20*/
+      }
+    }
+    a {
+      position: absolute;
+      display: table !important;
+
+      top: 0;
+      left: 0;
+
+      margin: 0 !important;
+      text-decoration: none;
+
+      .bannertext {
+        //position: absolute;
+        display: table-cell;
+
+        text-align: center;
+        vertical-align: middle;
+
+        line-height: 4*$base-size;
+        font-family: $font__main;
+        font-size: $base-size*3;
+        color: $text-color;
+
+        text-shadow: 0px 0px 0.33*$base-size #000;
+
+        background: transparent !important;
+      }
+    }
+  }
+
+  .banneritem
+  .banneritem img, .banneritem iframe {
+    position: absolute;
+    top: 0;
+    left: 0 !important;
     bottom: 0;
-    background-position: bottom;
+    right: 0;
-    background-size: 100%;
+    width: 100%;
-    background-repeat: no-repeat;
+    height: auto;
+  }
+
+  .bannerautoplay {
+    position: absolute;
+    bottom: 0 !important;
+    left: 0;
+
+    margin: 0;
+    padding: $base-size;
+
+    z-index: 200000;
+    width: auto;
+
+    .play {
+      display: inline-block;
+
+      width: $base-size/1.8 !important;
+      height: $base-size/1.8;
+      margin: 0 $smaller-size -2px 0;
+
+      border-top: solid 0.33*$base-size $highlight-color-2;
+      border-right: solid 0.33*$base-size $highlight-color-2;
+      border-bottom-left-radius: $base-size/1.8;
+      background: $highlight-color-1;
+
+      transform: rotate(45deg);
+      box-shadow: 0 0 0.33*$base-size $highlight-color-1;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+    .pause {
+      display: inline-block;
+
+      height: $base-size;
+      width: 0.33*$base-size !important;
+      margin: 0 $smaller-size -4px 0;
+
+      border-left: solid 0.33*$base-size $highlight-color-2;
+      border-right: solid 0.33*$base-size $highlight-color-2;
+      background: $highlight-color-1;
+
+      box-shadow: 0 0 0.33*$base-size $highlight-color-1;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .bannerjump-wrapper {
+    position: absolute;
+    bottom: 0 !important;
+    right: 0;
+
+    margin: 0;
+    padding: $base-size;
+
+    z-index: 200000;
+    width: auto;
+
+    .bannerjump {
+      display: inline-block;
+
+      width: 0.33*$base-size !important;
+      height: 0.33*$base-size;
+      margin: 0 $smaller-size -4px 0;
+
+      border-radius: $smaller-size;
+      border: solid 0.33*$base-size $highlight-color-1;
+      background: $highlight-color-2;
+
+      &.active {
+        background: $highlight-color-1;
+        border-color: $highlight-color-2;
+      }
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
   }
 
   .bannercontrols {
@@ -174,134 +363,5 @@ div.bannergroup {
       }
     }
   }
-
-  .bannerjump-wrapper {
-    position: absolute;
-    bottom: 0 !important;
-    right: 0;
-
-    margin: 0;
-    padding: $base-size;
-
-    z-index: 20000;
-    width: auto;
-
-    .bannerjump {
-      display: inline-block;
-
-      width: 0.33*$base-size !important;
-      height: 0.33*$base-size;
-      margin: 0 $smaller-size -4px 0;
-
-      border-radius: $smaller-size;
-      border: solid 0.33*$base-size $highlight-color-1;
-      background: $highlight-color-2;
-
-      &.active {
-        background: $highlight-color-1;
-        border-color: $highlight-color-2;
-      }
-
-      &:first-of-type {
-        margin-left: 0;
-      }
-
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .banneritem {
-    position: absolute;
-    overflow: hidden;
-    width: $slider_item_width;
-
-    padding: 0 !important;
-    transition: all 2s ease 0s;
-
-    &.active {
-      z-index: 100;
-      opacity: 1;
-
-      img {
-        -ms-filter: none;
-        filter: none;
-        transform: scale(1);
-      }
-    }
-
-    &.inactive {
-      z-index: 90;
-      opacity: 1;
-
-      &.visible {
-        z-index: 95;
-      }
-
-      img {
-        //-webkit-filter: blur(10px);
-        //-ms-filter: blur(5px);
-        //filter: blur(5px) !important;
-
-        -webkit-transform: scale(1.1);
-        transform: scale(1.1);
-      }
-    }
-
-    img {
-      vertical-align: middle !important;
-      width: 100%;
-      transition: all 0.2s ease 0s;
-
-      &.portrait {
-        width: 100%;
-        height: auto;
-      }
-      &:before {
-        content: "";
-        display: block;
-        padding-top: 42.5532%; /* initial ratio of 47:20*/
-      }
-    }
-    a {
-      position: absolute;
-      display: table !important;
-
-      top: 0;
-      left: 0;
-
-      margin: 0 !important;
-      text-decoration: none;
-
-      .bannertext {
-        //position: absolute;
-        display: table-cell;
-
-        text-align: center;
-        vertical-align: middle;
-
-        line-height: 4*$base-size;
-        font-family: $font__main;
-        font-size: $base-size*3;
-        color: $text-color;
-
-        text-shadow: 0px 0px 0.33*$base-size #000;
-
-        background: transparent !important;
-      }
-    }
-  }
-
-  .banneritem
-  .banneritem img, .banneritem iframe {
-    position: absolute;
-    top: 0;
-    left: 0 !important;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: auto;
-  }
 }