slidee width: 85000px

[tehg...@gmail.com]

I have over 200 elements in slidee, my init code is:
$(function() {
'use strict';
var $example = $('#example');
var $frame = $example.find('.frame'); window.frr = $frame;
document.slyInstance = new Sly($frame, {
horizontal: 1,
elasticBounds: 0,
itemNav: 'forceCentered',
activateMiddle: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
scrollBy: 1,
speed: 300,
dragHandle: 1,
dynamicHandle: 0,
clickBar: 1
}).init();
});
$(window).on('resize', function () {document.slyInstance.reload(); });
Elements are added while the page is generated, so when the Sly is created all 200 <li>elements</li> are there.

My css is:
/*coverflow*/
.frame {
width: 100%;
height: 100%;
overflow: hidden;
text-shadow: none;
display: block;
margin-left: auto;
margin-right: auto;
}

.frame ul {
list-style: none;;
/*font-size: 50px;*/
}

.frame ul li {
float: left;
/*width: 434px;*/
/*height: 382px;*/
background: #eee;
color: #3a3c47;
text-align: center;
cursor: pointer;
}

.frame {
-webkit-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}

.frame ul {
/*padding-left: -25%;*/
position: relative;
-webkit-transform-style: preserve-3d;
-ms-transform-style: flat;
transform-style: preserve-3d;
width:100%!important;
}

html[data-useragent*='MSIE 10.0'] .frame ul {
transform-style: flat;
}

.frame ul li {
position: relative;
border: 1px solid #3e404a;
-webkit-transform: rotateY(60deg) scale(0.9);
-ms-transform: rotateY(60deg) scale(0.9);
transform: rotateY(60deg) scale(0.9);
-webkit-transition: -webkit-transform 300ms ease-out;
transition: transform 300ms ease-out;
/*margin-right: -4.1%;*/
/*margin-left: -4%;*/
z-index: 1;
}

.frame ul li.active {
/*margin-left: -4%;*/
border: 2px solid #3e404a;
/*margin-right: -4.1%;*/
z-index: 10;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

.frame ul li.active ~ li {
/*margin-right: -4.1%;*/
/*margin-left: -4%;*/
-webkit-transform: rotateY(-60deg) scale(0.9);
-ms-transform: rotateY(-60deg) scale(0.9);
transform: rotateY(-60deg) scale(0.9);
z-index: 1;
}

[Sly.js]

You somehow forgot to describe what is the issue here...

And couldn't you just put this into a jsfiddle? You know, ... make my life easier? Make me more motivated to help you? :)

[mikei...@gmail.com]

hehe ^^^^^