Skip to content

Instantly share code, notes, and snippets.

@dbaines

dbaines/index.html

Last active December 10, 2015 08:18
Show Gist options
  • Save dbaines/4406833 to your computer and use it in GitHub Desktop.
Save dbaines/4406833 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<title>Steam Sale Slider</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper" class="wrapper">
<section id="todays_deals" class="deal_nav"></section>
<section id="slider_feature_container">
<div id="slider_feature"></div>
</section>
<div id="slide_prev"></div>
<div id="slide_next"></div>
<section id="slider_left_container">
<div id="slider_left"></div>
</section>
<section id="slider_right_container">
<div id="slider_right"></div>
</section>
<section id="yesterdays_deals" class="deal_nav"></section>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.hoverIntent.min.js"></script>
<script src="js/slider.js"></script>
</body>
</html>
Raw
slider.js
/* ======================================================================
STEAM SALE SLIDER
====================================================================== */
$(function(){
/* ======================================================================
SOME SETTINGS
====================================================================== */
var todaysDeals = $("#todays_deals");
var yesterdaysDeals = $("#yesterdays_deals");
var sliderContainer = $("#slider_feature");
var sliderLeft = $("#slider_left");
var sliderRight = $("#slider_right");
var prevButton = $("#slide_prev");
var nextButton = $("#slide_next");
/* ======================================================================
LOAD JSON SETTINGS
====================================================================== */
var deals_today,
deals_yesterday,
slideWidth,
darkSlideWidth;
// load json file via $.getJSON
$.getJSON('json/slider_settings.json', function(data){
// overwrite variables with information from json file
deals_today = data.slides_today;
deals_yesterday = data.slides_yesterday;
slideWidth = data.settings.slide_width;
darkSlideWidth = data.settings.darkslide_width;
// These randomise today and yesterdays deals, but doesn't mix them.
deals_today = fisherYates(deals_today);
deals_yesterday = fisherYates(deals_yesterday);
// Populate slides
populateToday();
populateYesterday();
populateSlides();
});
// create an empty array for allDeals.
// this gets populated as the small buttons are added to our page
var allDeals = [];
// start a count of items
var dealCount = 1;
/* ======================================================================
RANDOMISE DEAL ARRAYS
====================================================================== */
// http://stackoverflow.com/questions/2450954/how-to-randomize-a-javascript-array
function fisherYates ( myArray ) {
var i = myArray.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = myArray[i];
var tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
return myArray;
}
/* ======================================================================
LOAD IN TODAYS DEALS
====================================================================== */
function populateToday(){
$.each(deals_today, function(i, deal){
// increment i by one (starts at 1 instead of 0)
i++;
var item = renderCapsule(i,deal);
// add our item to todays deals
item.appendTo(todaysDeals);
// push this in to our "allDeals" array for the big slider
allDeals.push(deal);
});
}
/* ======================================================================
LOAD IN YESTERDAYS DEALS
====================================================================== */
function populateYesterday(){
$.each(deals_yesterday, function(j, deal){
// increment i by one (starts at 1 instead of 0)
j++;
var item = renderCapsule(j,deal);
// add our item to todays deals
item.appendTo(yesterdaysDeals);
// push this in to our "allDeals" array for the big slider
allDeals.push(deal);
});
}
/* ======================================================================
CAPSULE RENDERING FUNCTIONS
these render the small boxes
====================================================================== */
// renders a capsule containing item image and title
function renderCapsule(j,deal){
var image = deal.capsule;
var title = deal.name;
var item = $("<div class='item' />");
item.attr("data-num", dealCount);
dealCount++;
item.append("<a href='"+deal.link+"' title='"+title+"'><img src='"+image+"' alt='"+title+"' title='"+title+"' /></a>");
return item;
}
/* ======================================================================
POPULATE SLIDER FROM JSON
====================================================================== */
function populateSlides(){
// add each slider item
var item2right;
$.each(allDeals, function(k, deal){
var item = renderSliderItem(k, deal);
var itemleft = renderDarkSliderItem(k, deal);
var itemright = renderDarkSliderItem(k, deal);
sliderContainer.append(item);
sliderLeft.append(itemleft);
sliderRight.append(itemright);
// insert an additional first slide to the end of the right slider
if(k == 0){
item2right = renderDarkSliderItem(k, deal);
}
// insert an additional final slide at the start
// also insert one for the left slider
if(k == allDeals.length-1){
var item2 = renderSliderItem(k, deal);
var item2left = renderDarkSliderItem(k, deal);
sliderContainer.prepend(item2);
sliderLeft.prepend(item2left);
sliderRight.append(item2right);
}
});
// Mark first capsule as active
$(".deal_nav .item[data-num=1]").addClass("active");
}
/* ======================================================================
RENDER SLIDER ITEMS
====================================================================== */
function renderSliderItem(k, deal){
k++;
var item = $("<div class='item' />");
item.attr("data-num", k);
item.append("<a href='"+deal.link+"' title='"+deal.name+"'><img src='"+deal.banner+"' alt='"+deal.name+"' title='"+deal.name+"' /></a>");
// return item
return item;
}
function renderDarkSliderItem(k, deal){
k++;
var item = $("<div class='item' />");
item.attr("data-num", k);
item.append("<img src='"+deal.banner_dark+"' alt='"+deal.name+"' title='"+deal.name+"' />");
// return item
return item;
}
/* ======================================================================
SLIDE CONTROLS
====================================================================== */
// Capsule hovers
// Using hoverIntent, adapted by Hernan for .live (usage on appended items)
// https://raw.github.com/hernan/hoverIntent/master/jquery.hoverIntent.js
$(".deal_nav .item").hoverIntent({
sensativity: 7,
interval: 400,
over: function(){
// get data-num
var dataNum = $(this).attr("data-num");
// set this item to be active
setActiveThumbnail(dataNum);
// slideTo();
slideTo(dataNum);
},
out: function(){},
timeout: 0
});
// Next/Prev Buttons
prevButton.click(function(){
slideLeft();
});
nextButton.click(function(){
slideRight();
});
// Do next/previous action when clicking on the slider, too
sliderLeft.click(function(){
slideLeft();
});
sliderRight.click(function(){
slideRight();
});
// Capsule active state
function setActiveThumbnail(dataNum){
$(".deal_nav .item").removeClass("active");
$(".deal_nav .item[data-num="+dataNum+"]").addClass("active");
}
function slideLeft(){
if(sliderContainer.is(":animated")){return false;}
var activeSlide = getActiveSlide();
if(activeSlide == 1){
slideOffsetLeft();
} else {
slideTo(parseInt(activeSlide) - 1);
}
}
function slideRight(){
if(sliderContainer.is(":animated")){return false;}
var activeSlide = getActiveSlide();
if(activeSlide == 12){
slideOffsetRight();
} else {
slideTo(parseInt(activeSlide) + 1);
}
}
function getActiveSlide(){
var activeSlide = $(".deal_nav .item.active").attr("data-num");
return activeSlide;
}
function slideTo(slideNum){
// move main slider
var offset = parseInt(slideNum) * slideWidth;
sliderContainer.stop().animate({"left": "-"+offset+"px"}, 500);
// move left slider
var leftOffset = (parseInt(slideNum) * darkSlideWidth) - darkSlideWidth;
sliderLeft.stop().animate({"left": "-"+leftOffset+"px"}, 500);
// move right slider
var rightOffset = (parseInt(slideNum) * darkSlideWidth);
sliderRight.stop().animate({"left": "-"+rightOffset+"px"}, 500);
// apply capsule class
setActiveThumbnail(slideNum);
}
function slideOffsetLeft(){
// Left Slider
var sliderLeftInitial = darkSlideWidth * allDeals.length;
sliderLeft.css("left", "-"+sliderLeftInitial+"px");
var leftOffset = darkSlideWidth * 11;
sliderLeft.stop().animate({"left": "-"+leftOffset+"px"}, 500);
// Right Slider
sliderRight.stop().animate({"left": "0px"}, 500, function(){
var sliderRightEnd = darkSlideWidth * allDeals.length;
sliderRight.css({"left": "-"+sliderRightEnd+"px"});
});
// Main Slider
sliderContainer.stop().animate({"left": "0px"}, 500, function(){
var sliderEnd = slideWidth * allDeals.length;
sliderContainer.css({"left": "-"+sliderEnd+"px"});
});
// Update capsule
setActiveThumbnail(allDeals.length);
}
function slideOffsetRight(){
// Right Slider
sliderRight.css("left", "0");
sliderRight.animate({"left": "-"+darkSlideWidth+"px"}, 500);
// Left Slider
var leftOffset = allDeals.length * darkSlideWidth;
sliderLeft.stop().animate({"left": "-"+leftOffset+"px"}, 500, function(){
sliderLeft.css({"left": "0"});
});
// Main Slider
sliderContainer.stop().css({"left": "0px"}).animate({"left": "-"+slideWidth+"px"}, 500);
// Update capsule
setActiveThumbnail(1);
}
});
Raw
slider_01.js
/* ======================================================================
SOME SETTINGS
====================================================================== */
var todaysDeals = $("#todays_deals");
var yesterdaysDeals = $("#yesterdays_deals");
var sliderContainer = $("#slider_feature");
var sliderLeft = $("#slider_left");
var sliderRight = $("#slider_right");
var prevButton = $("#slide_prev");
var nextButton = $("#slide_next");
/* ======================================================================
LOAD JSON SETTINGS
====================================================================== */
var deals_today,
deals_yesterday,
slideWidth,
darkSlideWidth;
// load json file via $.getJSON
$.getJSON('json/slider_settings.json', function(data){
// overwrite variables with information from json file
deals_today = data.slides_today;
deals_yesterday = data.slides_yesterday;
slideWidth = data.settings.slide_width;
darkSlideWidth = data.settings.darkslide_width;
// These randomise today and yesterdays deals, but doesn't mix them.
deals_today = fisherYates(deals_today);
deals_yesterday = fisherYates(deals_yesterday);
// Populate slides
populateToday();
populateYesterday();
populateSlides();
});
// create an empty array for allDeals.
// this gets populated as the small buttons are added to our page
var allDeals = [];
// start a count of items
var dealCount = 1;
/* ======================================================================
RANDOMISE DEAL ARRAYS
====================================================================== */
// http://stackoverflow.com/questions/2450954/how-to-randomize-a-javascript-array
function fisherYates ( myArray ) {
var i = myArray.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = myArray[i];
var tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
return myArray;
}
Raw
slider_02.js
/* ======================================================================
LOAD IN TODAYS DEALS
====================================================================== */
function populateToday(){
$.each(deals_today, function(i, deal){
// increment i by one (starts at 1 instead of 0)
i++;
var item = renderCapsule(i,deal);
// add our item to todays deals
item.appendTo(todaysDeals);
// push this in to our "allDeals" array for the big slider
allDeals.push(deal);
});
}
/* ======================================================================
LOAD IN YESTERDAYS DEALS
====================================================================== */
function populateYesterday(){
$.each(deals_yesterday, function(j, deal){
// increment i by one (starts at 1 instead of 0)
j++;
var item = renderCapsule(j,deal);
// add our item to todays deals
item.appendTo(yesterdaysDeals);
// push this in to our "allDeals" array for the big slider
allDeals.push(deal);
});
}
/* ======================================================================
CAPSULE RENDERING FUNCTIONS
these render the small boxes
====================================================================== */
// renders a capsule containing item image and title
function renderCapsule(j,deal){
var image = deal.capsule;
var title = deal.name;
var item = $("<div class='item' />");
item.attr("data-num", dealCount);
dealCount++;
item.append("<a href='"+deal.link+"' title='"+title+"'><img src='"+image+"' alt='"+title+"' title='"+title+"' /></a>");
return item;
}
Raw
slider_03.js
/* ======================================================================
POPULATE SLIDER FROM JSON
====================================================================== */
function populateSlides(){
// add each slider item
var item2right;
$.each(allDeals, function(k, deal){
var item = renderSliderItem(k, deal);
var itemleft = renderDarkSliderItem(k, deal);
var itemright = renderDarkSliderItem(k, deal);
sliderContainer.append(item);
sliderLeft.append(itemleft);
sliderRight.append(itemright);
// insert an additional first slide to the end of the right slider
if(k == 0){
item2right = renderDarkSliderItem(k, deal);
}
// insert an additional final slide at the start
// also insert one for the left slider
if(k == allDeals.length-1){
var item2 = renderSliderItem(k, deal);
var item2left = renderDarkSliderItem(k, deal);
sliderContainer.prepend(item2);
sliderLeft.prepend(item2left);
sliderRight.append(item2right);
}
});
// Mark first capsule as active
$(".deal_nav .item[data-num=1]").addClass("active");
}
/* ======================================================================
RENDER SLIDER ITEMS
====================================================================== */
function renderSliderItem(k, deal){
k++;
var item = $("<div class='item' />");
item.attr("data-num", k);
item.append("<a href='"+deal.link+"' title='"+deal.name+"'><img src='"+deal.banner+"' alt='"+deal.name+"' title='"+deal.name+"' /></a>");
// return item
return item;
}
function renderDarkSliderItem(k, deal){
k++;
var item = $("<div class='item' />");
item.attr("data-num", k);
item.append("<img src='"+deal.banner_dark+"' alt='"+deal.name+"' title='"+deal.name+"' />");
// return item
return item;
}
Raw
slider_04.js
/* ======================================================================
SLIDE CONTROLS
====================================================================== */
// Capsule hovers
// Using hoverIntent, adapted by Hernan for .live (usage on appended items)
// https://raw.github.com/hernan/hoverIntent/master/jquery.hoverIntent.js
$(".deal_nav .item").hoverIntent({
sensativity: 7,
interval: 400,
over: function(){
// get data-num
var dataNum = $(this).attr("data-num");
// set this item to be active
setActiveThumbnail(dataNum);
// slideTo();
slideTo(dataNum);
},
out: function(){},
timeout: 0
});
// Next/Prev Buttons
prevButton.click(function(){
slideLeft();
});
nextButton.click(function(){
slideRight();
});
// Do next/previous action when clicking on the slider, too
sliderLeft.click(function(){
slideLeft();
});
sliderRight.click(function(){
slideRight();
});
// Capsule active state
function setActiveThumbnail(dataNum){
$(".deal_nav .item").removeClass("active");
$(".deal_nav .item[data-num="+dataNum+"]").addClass("active");
}
function slideLeft(){
if(sliderContainer.is(":animated")){return false;}
var activeSlide = getActiveSlide();
if(activeSlide == 1){
slideOffsetLeft();
} else {
slideTo(parseInt(activeSlide) - 1);
}
}
function slideRight(){
if(sliderContainer.is(":animated")){return false;}
var activeSlide = getActiveSlide();
if(activeSlide == 12){
slideOffsetRight();
} else {
slideTo(parseInt(activeSlide) + 1);
}
}
function getActiveSlide(){
var activeSlide = $(".deal_nav .item.active").attr("data-num");
return activeSlide;
}
function slideTo(slideNum){
// move main slider
var offset = parseInt(slideNum) * slideWidth;
sliderContainer.stop().animate({"left": "-"+offset+"px"}, 500);
// move left slider
var leftOffset = (parseInt(slideNum) * darkSlideWidth) - darkSlideWidth;
sliderLeft.stop().animate({"left": "-"+leftOffset+"px"}, 500);
// move right slider
var rightOffset = (parseInt(slideNum) * darkSlideWidth);
sliderRight.stop().animate({"left": "-"+rightOffset+"px"}, 500);
// apply capsule class
setActiveThumbnail(slideNum);
}
function slideOffsetLeft(){
// Left Slider
var sliderLeftInitial = darkSlideWidth * allDeals.length;
sliderLeft.css("left", "-"+sliderLeftInitial+"px");
var leftOffset = darkSlideWidth * 11;
sliderLeft.stop().animate({"left": "-"+leftOffset+"px"}, 500);
// Right Slider
sliderRight.stop().animate({"left": "0px"}, 500, function(){
var sliderRightEnd = darkSlideWidth * allDeals.length;
sliderRight.css({"left": "-"+sliderRightEnd+"px"});
});
// Main Slider
sliderContainer.stop().animate({"left": "0px"}, 500, function(){
var sliderEnd = slideWidth * allDeals.length;
sliderContainer.css({"left": "-"+sliderEnd+"px"});
});
// Update capsule
setActiveThumbnail(allDeals.length);
}
function slideOffsetRight(){
// Right Slider
sliderRight.css("left", "0");
sliderRight.animate({"left": "-"+darkSlideWidth+"px"}, 500);
// Left Slider
var leftOffset = allDeals.length * darkSlideWidth;
sliderLeft.stop().animate({"left": "-"+leftOffset+"px"}, 500, function(){
sliderLeft.css({"left": "0"});
});
// Main Slider
sliderContainer.stop().css({"left": "0px"}).animate({"left": "-"+slideWidth+"px"}, 500);
// Update capsule
setActiveThumbnail(1);
}
Raw
slider_settings.json
{
"settings": {
"slide_width": 952,
"darkslide_width": 794
},
"slides_today": [
{
"name": "Prototype",
"link": "#",
"capsule": "capsules/capsule_01.jpg",
"banner": "banner/01.jpg",
"banner_dark": "banner_dark/01.jpg"
},
{
"name": "Just Cause 2",
"link": "#",
"capsule": "capsules/capsule_02.jpg",
"banner": "banner/02.jpg",
"banner_dark": "banner_dark/02.jpg"
},
{
"name": "Rebellion",
"link": "#",
"capsule": "capsules/capsule_03.jpg",
"banner": "banner/03.jpg",
"banner_dark": "banner_dark/03.jpg"
},
{
"name": "Assassins Creed III",
"link": "#",
"capsule": "capsules/capsule_04.jpg",
"banner": "banner/04.jpg",
"banner_dark": "banner_dark/04.jpg"
},
{
"name": "Limbo",
"link": "#",
"capsule": "capsules/capsule_05.jpg",
"banner": "banner/05.jpg",
"banner_dark": "banner_dark/05.jpg"
},
{
"name": "Castle Crashers",
"link": "#",
"capsule": "capsules/capsule_06.jpg",
"banner": "banner/06.jpg",
"banner_dark": "banner_dark/06.jpg"
}
],
"slides_yesterday": [
{
"name": "LA Noir",
"link": "#",
"capsule": "capsules/capsule_07.jpg",
"banner": "banner/07.jpg",
"banner_dark": "banner_dark/07.jpg"
},
{
"name": "Lord of the Rings",
"link": "#",
"capsule": "capsules/capsule_08.jpg",
"banner": "banner/08.jpg",
"banner_dark": "banner_dark/08.jpg"
},
{
"name": "Counter-Strike",
"link": "#",
"capsule": "capsules/capsule_09.jpg",
"banner": "banner/09.jpg",
"banner_dark": "banner_dark/09.jpg"
},
{
"name": "Worms",
"link": "#",
"capsule": "capsules/capsule_10.jpg",
"banner": "banner/10.jpg",
"banner_dark": "banner_dark/10.jpg"
},
{
"name": "FTL",
"link": "#",
"capsule": "capsules/capsule_11.jpg",
"banner": "banner/11.jpg",
"banner_dark": "banner_dark/11.jpg"
},
{
"name": "XCOM",
"link": "#",
"capsule": "capsules/capsule_12.jpg",
"banner": "banner/12.jpg",
"banner_dark": "banner_dark/12.jpg"
}
]
}
Raw
style.css
body {
margin: 0;
font-family: Arial, sans-serif;
font-size: 13px;
background: #222;
color: #ccc; }
img {
border: 0; }
a {
color: #ccc;
text-decoration: none; }
a:hover {
color: #999; }
.mainhead {
padding: 10px 0;
border-bottom: 1px solid #666666; }
.mainhead .right {
float: right; }
.wrapper {
padding-top: 20px;
width: 975px;
margin: 0 auto;
position: relative; }
.wrapper #todays_deals,
.wrapper #yesterdays_deals {
padding: 10px 12px;
width: 948px;
zoom: 1; }
.wrapper #todays_deals:before, .wrapper #todays_deals:after,
.wrapper #yesterdays_deals:before,
.wrapper #yesterdays_deals:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden; }
.wrapper #todays_deals:after,
.wrapper #yesterdays_deals:after {
clear: both; }
.wrapper #todays_deals .item,
.wrapper #yesterdays_deals .item {
float: left;
box-shadow: 0 3px 10px -3px black;
margin: 3px;
position: relative;
overflow: hidden;
z-index: 10;
white-space: nowrap; }
.wrapper #todays_deals .item img,
.wrapper #yesterdays_deals .item img {
display: block;
width: 150px;
height: 123px; }
.wrapper #todays_deals .item.active,
.wrapper #yesterdays_deals .item.active {
border: 3px solid #45a0e6;
box-shadow: 0 0 20px 2px #55b0f6;
z-index: 5;
margin: 0; }
.wrapper #slider_feature_container {
width: 952px;
height: 412px;
overflow: hidden;
z-index: 50;
box-shadow: 0 0 5px #45a0e6;
position: relative;
margin: 8px 11px;
clear: both;
zoom: 1; }
.wrapper #slider_feature_container:before, .wrapper #slider_feature_container:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden; }
.wrapper #slider_feature_container:after {
clear: both; }
.wrapper #slider_feature_container #slider_feature {
width: 14280px;
position: relative;
left: -952px; }
.wrapper #slider_feature_container #slider_feature .item {
border: 4px solid #45a0e6;
background: #000;
float: left;
position: relative;
padding: 2px; }
.wrapper #slider_feature_container #slider_feature .item img {
width: 940px;
height: 400px;
display: block; }
.wrapper #slider_left_container,
.wrapper #slider_right_container {
position: absolute;
top: 216px;
width: 794px;
height: 338px;
overflow: hidden;
z-index: 20; }
.wrapper #slider_left,
.wrapper #slider_right {
width: 142800px;
position: relative; }
.wrapper #slider_left .item,
.wrapper #slider_right .item {
float: left;
width: 794px;
height: 338px;
background: #485D6C;
overflow: hidden; }
.wrapper #slider_left_container {
right: 963px; }
.wrapper #slider_right_container {
left: 963px; }
.wrapper #slider_right_container #slider_right {
left: -794px; }
.wrapper #slide_prev,
.wrapper #slide_next {
position: absolute;
top: 366px;
width: 18px;
height: 35px;
background: white;
z-index: 25;
cursor: pointer; }
.wrapper #slide_prev {
right: 970px;
background: url("images/arrow_left.png") top left no-repeat; }
.wrapper #slide_next {
left: 970px;
background: url("images/arrow_right.png") top left no-repeat; }
Raw
style.scss
@mixin clearfix {
zoom:1;
&:before, &:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
body {
margin: 0;
font-family: Arial, sans-serif;
font-size: 13px;
background: #222;
color: #ccc;
}
img {border: 0;}
a {
color: #ccc;
text-decoration: none;
&:hover {
color: #999;
}
}
.mainhead {
padding: 10px 0;
border-bottom: 1px solid #666;
.right {
float: right;
}
}
.wrapper {
padding-top: 20px;
width: 975px;
margin: 0 auto;
position: relative;
#todays_deals,
#yesterdays_deals {
padding: 10px 12px;
width: 948px;
@include clearfix;
.item {
float: left;
box-shadow: 0 3px 10px -3px #000;
margin: 3px;
position: relative;
overflow: hidden;
z-index: 10;
white-space: nowrap;
img {
display: block;
width: 150px;
height: 123px;
}
&.active {
border: 3px solid #45A0E6;
box-shadow: 0 0 20px 2px #55b0F6;
z-index: 5;
margin: 0;
}
}
}
#slider_feature_container {
width: 952px;
height: 412px;
overflow: hidden;
z-index: 50;
box-shadow: 0 0 5px #45A0E6;
position: relative;
margin: 8px 11px;
clear: both;
@include clearfix;
#slider_feature {
width: 14280px;
position: relative;
left: -952px;
.item {
border: 4px solid #45A0E6;
background: #000;
float: left;
position: relative;
padding: 2px;
img {
width: 940px;
height: 400px;
display: block;
}
}
}
}
#slider_left_container,
#slider_right_container {
position: absolute;
top: 216px;
width: 794px;
height: 338px;
overflow: hidden;
z-index: 20;
}
#slider_left,
#slider_right {
width: 142800px;
position: relative;
.item {
float: left;
width: 794px;
height: 338px;
background: #485D6C;
overflow: hidden;
}
}
#slider_left_container {
right: 963px;
}
#slider_right_container {
left: 963px;
#slider_right {
left: -794px;
}
}
#slide_prev,
#slide_next {
position: absolute;
top: 366px;
width: 18px;
height: 35px;
background: white;
z-index: 25;
cursor: pointer;
}
#slide_prev {
right: 970px;
background: url("images/arrow_left.png") top left no-repeat;
}
#slide_next {
left: 970px;
background: url("images/arrow_right.png") top left no-repeat;
}
}
Raw
style_3d.css
.wrapper {
-webkit-perspective: 1600px;
-moz-perspective: 1600px;
perspective: 1600px;
}
#slider_left_container {
-webkit-transform: rotateY(60deg) scale(1.6);
-moz-transform: rotateY(60deg) scale(1.6);
transform: rotateY(60deg) scale(1.6);
right: 1044px;
}
#slider_right_container {
-webkit-transform: rotateY(-60deg) scale(1.6);
-moz-transform: rotateY(-60deg) scale(1.6);
transform: rotateY(-60deg) scale(1.6);
left: 1044px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment