Skip to content

Instantly share code, notes, and snippets.

@mason-stewart
Forked from gingerrific/index.html
Created May 28, 2014 02:17
Show Gist options
  • Save mason-stewart/529e3a9787fdeca33219 to your computer and use it in GitHub Desktop.
Save mason-stewart/529e3a9787fdeca33219 to your computer and use it in GitHub Desktop.
<div class="images-container">
<div class="image-slider">
</div>
</div>
<div class="button-container">
<div class="button previous">&lt;&lt;</div>
<div class="button play">&#9654
</div>
<div class="button stop">&#9608</div>
<div class="button next">&gt;&gt;</div>
</div>
<script type="text/template" class="image-frame">
<div class="image-display"></div>
</script>
'use strict';
var imagesArray = ["https://s3.amazonaws.com/ksr/projects/660047/photo-main.jpg?1397831981", "http://supergiantgames.com/site/wp-content/uploads/Transistor_Wallpaper_1920x1080.jpg", "http://cloud-4.steampowered.com/ugc/615043645846589420/E237625134C7E37487EC553109818982CE3FD0FD/", "http://www.radialgames.com/press/ROCKETSROCKETSROCKETS/images/logo.png", "http://thekoalition.com/images/2013/08/bell.jpg"];
function imageDisplay (images) {
if ($.isArray(images) && images !== []){
// error checks for array type
var max = images.length
// sets the display width of the div to accomodate varying width based on array length
$('.image-slider').css('width',(max*100)+'%');
images.map(function (x) {
// appends the contents of the .image-frame div into the dom for each index of the array (could posisbly be split off)
$('.image-slider').append($('.image-frame').text());
// the most recent div will have its background-image changed to the formatted array index
$('.image-display').last().css('background', 'url(' + x + ') center / cover no-repeat');
})
}
else {
throw new Error("ImageParse requires a non-empty array as argument");
}
}
var i = 0;
var interval;
// inter function that calls the animation, but also loops
function intervalManager () {
interval = setInterval(function () {
moveLeft();
i += 1;
if (i == 6) {
// when the counter hits the end of the array (in this case) return to one. need to set to index.length instead of '6'
// also resets the image slider to the first image
i=1;
$('.image-slider').animate({'margin-left': '0px', 'transition': 'none'},10);
}
}, 2400);
}
// animate the slider moving left the width of an image
function moveLeft () {
$('.image-slider').animate({'margin-left': '-=392px'}, 800);
}
// 'controls' - allows the slider to be stopped, restarted and advanced
$('.stop').click(function () {
$('.image-slider').stop();
clearInterval(interval);
})
$('.play').click(function () {
imageDisplay(imagesArray);
intervalManager();
})
$('.previous').click(function () {
clearInterval(interval);
$('.image-slider').animate({'margin-left': '+=392px'}, 800);
i -=1;
if (i == -1) {
$('.image-slider').stop();
$('.image-slider').animate({'margin-left': '-=392px'}, 800);
i = 1;
}
intervalManager();
})
$('.next').click(function () {
clearInterval(interval);
$('.image-slider').animate({'margin-left': '-=392px'}, 800);
i += 1;
if (i == 7) {
$('.image-slider').stop();
$('.image-slider').animate({'margin-left': '+=392px'}, 800);
i = 5;
}
intervalManager();
})
$icon-font-path: "/bower_components/sass-bootstrap/fonts/";
@import 'sass-bootstrap/lib/bootstrap';
.images-container {
margin: 30px auto;
border: 4px solid gray;
height: 300px;
width: 400px;
overflow: hidden;
& .image-slider {
display: inline-block;
width: 300%;
transition: all 1s linear;
margin-left: 392px;
& .image-display {
height: 292px;
width: 392px;
float: left;
background-repeat: no-repeat;
background-size: contain;
}
}
}
.button-container {
margin: 0 auto;
width: 632px;
}
.button {
margin-top: 60px;
width: 150px;
height: 75px;
background-color: rgb(149, 149, 165);
border-radius: 8px;
display: inline-block;
margin-right: 5px;
text-align: center;
line-height: 55px;
font-weight: bolder;
color: rgb(232, 30, 30);
text-shadow: 0px 1px 1px rgb(223, 23, 23);
font-size: 20px;
letter-spacing: -.1em;
box-shadow: inset 0px -12px 0px rgb(130, 130, 147),
2px 2px 1px rgb(111, 111, 126);
transition: all .2s ease;
padding:.4em;
vertical-align: bottom;
cursor: default;
}
.button:hover {
height:70px;
margin-top: 65px;
box-shadow: inset 0px -8px 0px rgb(130, 130, 147),
2px 2px 1px rgb(111, 111, 126);
}
.button:active {
height: 65px;
margin-top: 70px;
box-shadow: inset 0px -4px 0px rgb(130, 130, 147),
2px 2px 1px rgb(111, 111, 126);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment