javascript - why is this image outside of the frame?

Question

I'm trying to learn how to use http://darsa.in/sly/ a jquery based gallery creator. I have copy and pasted the slider I want to reproduce http://darsa.in/sly/examples/horizontal.html second one from the bottom. My attempt is here http://morenoh149.github.io/sly_horizontal.html

HTML

<div class="wrap">
<div class="scrollbar">
  <div class="handle">
  </div>
</div>
<div class="frame effects" id="effects" style="overflow: hidden;">
  <ul>
    <li>0 <img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>1<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">2<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">3<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">4<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="active">5<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">6<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">7<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>8<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>9<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>10<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
  </ul>
</div>
</div>

CSS

.frame {
        height: 250px;
        line-height: 250px;
        overflow: hidden;
}
.frame ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        font-size: 50px;
}
.frame ul li {
        float: left;
        width: 227px;
        height: 100%;
        margin: 0 1px 0 0;
        padding: 0;
        background: #333;
        color: #ddd;
        text-align: center;
        cursor: pointer;
}
.frame ul li.active {
        color: #fff;
        background: #a03232;
}

/* Effects */
.effects {
    height: 200px;
    line-height: 200px;
    -webkit-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
    -webkit-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    overflow-y: show;
}
.effects ul {
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.effects ul li {
    position: relative;
    margin: 0 -20px;
    -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;
}
.effects ul li.active {
    z-index: 10;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.effects ul li.active ~ li {
    -webkit-transform: rotateY(-60deg) scale(0.9);
    -ms-transform: rotateY(-60deg) scale(0.9);
    transform: rotateY(-60deg) scale(0.9);
}

JavaScript

$(document).ready(function() {
var $frame = $('#effects');
var $wrap  = $frame.parent();

// Call Sly on frame
$frame.sly({
    horizontal: 1,
    itemNav: 'forceCentered',
    smart: 1,
    activateMiddle: 1,
    activateOn: 'click',
    mouseDragging: 1,
    touchDragging: 1,
    releaseSwing: 1,
    startAt: 3,
    scrollBar: $wrap.find('.scrollbar'),
    scrollBy: 1,
    speed: 300,
    elasticBounds: 1,
    easing: 'swing',
    dragHandle: 1,
    dynamicHandle: 1,
    clickBar: 1,

    // Buttons
    prev: $wrap.find('.prev'),
    next: $wrap.find('.next')
});
});

Where am I going wrong?

Answer 1

removed the calls to line-height now I can treat the frames like divs.