Added Styles, Arrows, cleaned scss and js, added example implementation

TODO: new positioning of items --> Array rotate fix z-indexing
2017-02-22 16:47:33 +01:00
commit 60cbcf1efe
6 changed files with 735 additions and 0 deletions
@@ -0,0 +1,3 @@
+<component name="DependencyValidationManager">
+  <scope name="*.css.tmp" pattern="file[*]:*.css.tmp" />
+</component>
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+    <mapping directory="C:\Users\Simon\Documents\Websites\00 Plugins\slider\scss-framework" vcs="Git" />
+  </component>
+</project>
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="--no-cache --update $FileName$:$FileNameWithoutExtension$.css.tmp" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" value="Compiles .scss files into .css files" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="scss" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="SCSS" />
+      <option name="output" value="$FileNameWithoutExtension$.css.tmp" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="C:/Ruby23-x64/bin/scss.bat" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$ --use autoprefixer -o $FileNameWithoutExtension$" />
+      <option name="checkSyntaxErrors" value="false" />
+      <option name="description" value="" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="*" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="Autoprefixer" />
+      <option name="output" value="$FileNameWithoutExtension$" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="$USER_HOME$/AppData/Roaming/npm/postcss.cmd" />
+      <option name="scopeName" value="*.css.tmp" />
+      <option name="trackOnlyRoot" value="false" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>
@@ -0,0 +1,316 @@
+/**
+ *
+ */
+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();
+    })
+})(jQuery);
+
+
+// IF WINDOW GETS RESIZED
+(function ($) {
+    $(window).resize(function () {
+        resetcss();
+        maintenance();
+    })
+})(jQuery);
+
+// -----------------------------------------
+// LIST OF ALL FUNCTIONS TRIGGERED ABOVE
+function maintenance() {
+    Dimensions();
+    banner();
+}
+// -----------------------------------------
+
+// GIVES BACK ALL DIMENSIONS
+function Dimensions() {
+    (function ($) {
+
+        bannergroupwidth = null;
+        banneritemwidth = null;
+
+        bannerheight = null;
+        banneroffset = null;
+
+        // Get jQuery Objects
+        bannergroup = $('.bannergroup');
+        banneritem = $('.banneritem');
+
+        // TODO Reset the CSS Properties
+        banneritem.css({
+            width: '',
+            height: '',
+            left: ''
+        });
+
+        bannergroupwidth = bannergroup[0].clientWidth;
+        banneritemwidth = banneritem[0].clientWidth;
+
+        // CALCULATE BANNER DIMENSIONS
+        bannerheight = banneritemwidth / 1.5;
+        banneroffset = (bannergroupwidth-banneritemwidth)/2;
+
+    })(jQuery);
+
+}
+
+// BANNER RELATED FUNCTIONS
+function banner(activeitem) {
+    (function ($) {
+        // -----------------------------------------------------------------------
+        // THE BANNER SLIDER
+        // -----------------------------------------------------------------------
+        // SET activeelement to first element if not set
+
+        if (!activeitem) {
+            activeitem = 0;
+        }
+
+        // Get the Control Elements
+        bannerjump_wrapper = $('.bannerjump-wrapper');
+        bannercontrols = $('.bannercontrols');
+
+        // Make the banner arraylength more comfortable to calculate in the loop
+        bannerarraylength = banneritem.length - 1;
+
+        // -----------------------------------------------------------------------
+        // HTML
+        // -----------------------------------------------------------------------
+
+        // REMOVE JUMPER AND LEFT/RIGHT CONTROLS
+        // ------------------------------------------------------------------------
+        bannerjump_wrapper.detach();
+        bannercontrols.detach();
+
+        // ADD THE CONTROLS
+        // ------------------------------------------------------------------------
+        // ADD the Jumper-wrapper
+        bannergroup.append("<div class='bannerjump-wrapper'></div>");
+
+        // ADD the left/right 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>");
+
+
+        // SET BANNER DIMENSIONS
+        // --------------------------------------------------------------------
+        bannergroup.css({
+            height: bannerheight
+        });
+        $('.banneritem, .banneritem iframe').css({
+            width: banneritemwidth,
+            height: bannerheight,
+            left: banneroffset
+        });
+        $('.banneritem a').css({
+            width: banneritemwidth,
+            height: bannerheight
+        });
+
+
+        // BANNER CONTROLS
+        // --------------------------------------------------------------------------
+
+        // SET LEFT/RIGHT DIMENSIONS
+        bannercontrols_left = $('.bannercontrols .left');
+        bannercontrols_right = $('.bannercontrols .right');
+
+
+        bannercontrols_left.css({
+            position: "absolute",
+            left: '',
+            top: '',
+            width: '',
+            height: '',
+            "z-index": "10000"
+        });
+
+        bannercontrols_left.css({
+            position: "absolute",
+            top: 0,
+            width: banneroffset,
+            height: bannerheight,
+            "z-index": "10000"
+        });
+
+        bannercontrols_left.css({
+            left: bannergroupwidth - bannercontrols_left[0].clientWidth - 5 // TODO Remove these 5px whereever they come from
+        })
+
+        bannercontrols_right.css({
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: banneroffset,
+            height: bannerheight,
+            "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
+            // IN FRONT OF IT
+            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;
+            }
+
+
+            // SET THE VALUES CALCULATED IN THE LOGIC
+            $banneritem_nth.css({
+                "left": $left,
+                "width": banneritemwidth,
+                "height": bannerheight
+                //"opacity": 1
+            });
+
+
+            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";
+            }
+            else if (activeitem == bannerarraylength && $i == 0) {
+                $state = "inactive visible";
+                $removal = "active";
+            }
+            else if (activeitem == 0 && $i == bannerarraylength) {
+                $state = "inactive visible";
+                $removal = "active";
+            }
+            else {
+                $state = "inactive";
+                $removal = "active visible";
+            }
+
+            $banneritem_nth.addClass($state);
+            $banneritem_nth.removeClass($removal);
+
+            //$('.banneritem:nth-of-type(' + ($i + 1) + ') img').css({
+            //    "top": (bannerheight - $imageheight) / 2
+            //})
+            if (bannerarraylength > 0) {
+                // CONSTRUCT THE JUMP-ICONS
+                $('.bannerjump-wrapper').prepend(
+                    "<a class='bannerjump bannerjump-" + ($i)
+                    + "' onclick='jump(" + ($i) + ")'></a>");
+
+                // Make the active jumper colored different
+                if (activeitem == $i) {
+                    $('.bannerjump-' + ($i)).addClass("active");
+                }
+            }
+
+        } // End for()
+
+        //prevent banner iframes from getting too large
+        var iframes = $('.banneritem iframe');
+        for (var i = 0; i < iframes.length; i++) {
+            var iframe = iframes[i];
+            iframe.removeAttribute('height');
+            iframe.removeAttribute('width');
+        }
+
+    })(jQuery);
+}
+
+function resetcss() {
+
+}
+
+// jump to specific Banneritem
+function jump($activeitem) {
+    (function ($) {
+        // STOP autoslider
+        clearInterval(bannerautoslide);
+        // JUMP to chosen Item
+        banner($activeitem);
+    })(jQuery);
+}
+
+// Scroll through the Banneritems
+// to the left
+function scrollL() {
+    (function ($) {
+        // GET Number of Items in the bannergroup
+        activeitem++;
+
+        if (activeitem >= banneritem.length) {
+            activeitem = activeitem - banneritem.length;
+        }
+
+        banner(activeitem);
+    })(jQuery);
+}
+
+// to the Right
+function scrollR() {
+    (function ($) {
+        // GET Number of Items in the bannergroup
+        activeitem--;
+
+        if (activeitem < 0) {
+            activeitem = activeitem + banneritem.length;
+        }
+
+        banner(activeitem);
+    })(jQuery);
+}
+
+// Scroll on Time
+var bannerautoslide = setInterval(function () {
+    scrollL();
+}, 7500);
+
+// TODO Set images as background-images
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+
+    <title>Slider - Simon Gehrig</title>
+
+    <!--ENTER THIS IN YOUR HEAD-SECTION-->
+    <link rel="stylesheet" href="slider.css" type="text/css">
+    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+    <script type="application/javascript" rel="script" src="bannerslider.js"></script>
+</head>
+<body>
+<header>
+    <span class="brand">Brand Name</span>
+</header>
+<div id="content">
+    <div class="bannergroup">
+        <div class="banneritem">
+            <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>
+            </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>
+            </a>
+        </div>
+        <div class="banneritem">
+            <img src="https://unsplash.it/750/502/?random">
+            <!--<img src="http://lorempixel.com/750/502/">-->
+            <a href="#">
+                <div class="bannertext">Dies ist ein Text.</div>
+            </a>
+        </div>
+        <div class="banneritem">
+            <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>
+            </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.
+    </div>
+</div>
+<footer>
+    <span>
+    &copy; SIMON GEHRIG 2017
+    </span>
+</footer>
+
+</body>
+</html>
@@ -0,0 +1,307 @@
+@import "scss-framework/framework";
+
+/* Slider */
+
+// CONFIGURATION
+
+$base-size: 14px;
+$smaller-size: $base-size*0.66;
+
+$slider_width:100%;
+$slider_item_width:20%;
+
+$font__main: Calibri, sans-serif;
+
+$highlight-color-1: #3a9985;
+$highlight-color-2: #d38b71;
+
+$text-color: #ffffff;
+$base-color: #ffffff;
+
+// END CONFIGURATION
+
+body {
+  //background-color: rgba($highlight-color-1, 0.5)
+  font-family: Calibri, sans-serif;
+}
+
+header {
+  @include absolute-span(0, 12.5%, auto, 12.5%);
+  position: fixed;
+  height: 200px;
+  background-color: $highlight-color-1;
+  z-index: 1000;
+  .brand {
+    display: block;
+    font-size: 100px;
+    font-weight: 700;
+    padding:25px 50px!important;
+    color: $base-color;
+    text-transform: uppercase;
+  }
+}
+
+div#content {
+  width: 75%;
+  margin: 200px auto 0 auto;
+  background-color: $base-color;
+  border-left: solid 1px $highlight-color-2;
+  border-right: solid 1px $highlight-color-2;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding-bottom: 120px;
+  .text {
+    max-width: 50%;
+    margin: 20px auto;
+  }
+}
+
+footer {
+  display: table;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  width: 100%;
+  background-color: $highlight-color-2;
+  text-align: center;
+  span {
+    display: table-cell;
+    vertical-align: middle;
+    margin: 0 auto;
+  }
+}
+
+div.bannergroup {
+  width: $slider_width;
+  position: relative;
+  z-index: 0;
+  margin: 0 auto;
+  padding: 0 !important;
+  overflow: hidden;
+  background-color: $base-color;
+
+  &:after {
+    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;
+  }
+
+  .bannercontrols {
+    position: absolute;
+
+    .left {
+      display: table;
+
+      position: absolute;
+      top: 0;
+      right: 100%;
+
+      min-width: 7*$base-size;
+      margin: 0 !important;
+
+      // PLAIN BACKGROUND
+      //background-color: rgba($text-color, 0.7);
+
+      // GRADIENT BACKGROUND
+      //background: linear-gradient(to left, rgba($base-color,1) 0%, rgba($base-color,0.5) 66%, rgba($base-color,0) 100%);
+
+      .circle {
+        transform: rotate(180deg);
+      }
+    }
+
+    .right {
+      display: table;
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      min-width: 7*$base-size;
+      margin: 0 !important;
+
+      // PLAIN BACKGROUND
+      //background-color: rgba($text-color, 0.7);
+
+      // GRADIENT BACKGROUND
+      //background: linear-gradient(to right, rgba($base-color,1) 0%, rgba($base-color,0.5) 66%, rgba($base-color,0) 100%);
+    }
+
+    .iconwrapper {
+      display: table-cell;
+      vertical-align: middle;
+
+      .circle {
+        display: block;
+        overflow: hidden !important;
+
+        position: relative;
+        width: 3.33*$base-size;
+        height: 3.33*$base-size;
+        margin: 0 auto;
+
+        border-radius: 3.33*$base-size;
+        border: solid 0.33*$base-size $highlight-color-2;
+        background-color: $highlight-color-1;
+
+        opacity: 1;
+        box-shadow: 0 0 0.33*$base-size $highlight-color-1;
+
+        .arrow {
+          display: block;
+
+          position: absolute;
+          right: 20%;
+          top: 30%;
+
+          width: (3.33/3)*$base-size;
+          height: (3.33/3)*$base-size;
+
+          border-left: solid 0.33*$base-size $highlight-color-2;
+          border-top: solid 0.33*$base-size $highlight-color-2;
+
+          transform: rotate(-45deg);
+        }
+      }
+    }
+  }
+
+  .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;
+  }
+}
+