simongehrig.de/JS-Slider
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Simon Gehrig
2017-02-23 12:12:01 +01:00
parent 60cbcf1efe
commit 8c7959d1d4
3 changed files with 411 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bannerslider.js
+193 -87
View File
@@ -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
banneritem.css({
width: '',
height: '',
left: ''
});
banneritems = '';
banneritems = $('.banneritem');
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;
banneroffset = (bannergroupwidth-banneritemwidth)/2;
bannerheight = banneritemwidth / slider_aspect;
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>");
// ADD the left/right controls
// TODO Jumps to <a>-top by clicking left/right arrows
// 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
// 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;
}
$banneritemnr = $i;
$posnr = orderarray[$i];
$banneritem = $(".banneritem:eq(" + $banneritemnr + ")");
// SET THE VALUES CALCULATED IN THE LOGIC
$banneritem_nth.css({
"left": $left,
"width": banneritemwidth,
"height": bannerheight
//"opacity": 1
});
$posoffset = activepos - 1 - $posnr;
$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);
$banneritem_nth.removeClass($removal);
// SET THE VALUES CALCULATED IN THE LOGIC
$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) {
activeitem = activeitem - banneritem.length;
if (activeitem >= banneritems.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
// 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
+16 -4
View File
@@ -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
+202 -142
View File
@@ -7,13 +7,13 @@
$base-size: 14px;
$smaller-size: $base-size*0.66;
$slider_width:100%;
$slider_item_width:20%;
$slider_width: 100%;
$slider_item_width: 61.8%;
$font__main: Calibri, sans-serif;
$highlight-color-1: #3a9985;
$highlight-color-2: #d38b71;
$highlight-color-1: #333333;
$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 {
content: ' ';
//background-image: url($img-dir + "/wave.png");
// Bottom Background Image
//&: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;
//}
.banneritem {
position: absolute;
height: 100px;
width: 100%;
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;
background-size: 100%;
background-repeat: no-repeat;
right: 0;
width: 100%;
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;
}
}