From 60cbcf1efe515ec0812efed5d492a64e863031cb Mon Sep 17 00:00:00 2001 From: simongehrig Date: Wed, 22 Feb 2017 16:47:33 +0100 Subject: [PATCH] Added Styles, Arrows, cleaned scss and js, added example implementation TODO: new positioning of items --> Array rotate fix z-indexing --- .idea/scopes/__css_tmp.xml | 3 + .idea/vcs.xml | 7 + .idea/watcherTasks.xml | 43 +++++ bannerslider.js | 316 +++++++++++++++++++++++++++++++++++++ slider.html | 59 +++++++ slider.scss | 307 +++++++++++++++++++++++++++++++++++ 6 files changed, 735 insertions(+) create mode 100644 .idea/scopes/__css_tmp.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/watcherTasks.xml create mode 100644 bannerslider.js create mode 100644 slider.html create mode 100644 slider.scss diff --git a/.idea/scopes/__css_tmp.xml b/.idea/scopes/__css_tmp.xml new file mode 100644 index 0000000..6873051 --- /dev/null +++ b/.idea/scopes/__css_tmp.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..2cec153 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 0000000..a185419 --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,43 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/bannerslider.js b/bannerslider.js new file mode 100644 index 0000000..ccf4d86 --- /dev/null +++ b/bannerslider.js @@ -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("
"); + + // ADD the left/right controls + bannergroup + .append( + "
"); + + + // 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( + ""); + + // 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 \ No newline at end of file diff --git a/slider.html b/slider.html new file mode 100644 index 0000000..806700b --- /dev/null +++ b/slider.html @@ -0,0 +1,59 @@ + + + + + + Slider - Simon Gehrig + + + + + + + +
+ Brand Name +
+
+
+
+ + + +
Dies ist ein Text.
+ +
+
+ + + +
Dies ist ein Text.
+ +
+
+ + + +
Dies ist ein Text.
+ +
+
+ + + +
Dies ist ein 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. +
+
+ + + + \ No newline at end of file diff --git a/slider.scss b/slider.scss new file mode 100644 index 0000000..42f886a --- /dev/null +++ b/slider.scss @@ -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; + } +} +