带有垂直标题的Kwicks滑块

Question

我需要创建一个滑块，如以下链接http://livedemo00.template-help.com/wt_37383/index-4.html所示

我已经使用kwicks插件创建了一个滑块，但无法添加垂直标题

HTML

Javascript：$ () .ready(function (){ $('.kwicks').kwicks({ size: 125，maxSize: 250，spacing: 5，behavior：'menu‘})；$(’.kwicks‘).kwicks(’maxSize‘，0)；})；

CSS：.kwicks { width: 515px；height: 100px；} .kwicks > li { width: 125px；height: 100px；/*被kwicks覆盖，但适用于禁用面板*/ JavaScript -left: 5px；float: left；}#.kwicks-1{background-/*：#53b388；} #panel-2 {背景色：#5a69a9；} #panel-3 {背景色：#c26468；} #panel-4 {背景色：#bf7cc7；}

Answer 1

像这样的东西？

http://jsfiddle.net/A6XkM/5/

注意:使用webkit浏览器。(chrome或safari)

<ul class='kwicks kwicks-horizontal'>
    <li id='panel-1' data-text="Text1"></li>
    <li id='panel-2' data-text="Text2"></li>
    <li id='panel-3' data-text="Text3"></li>
    <li id='panel-4' data-text="Text4"></li>
</ul>

.kwicks > li:after {
    content: attr(data-text);
    position: absolute;
    top: 40px;
    left: 0;
    width: 30px;
    height: 30px;
    line-height: 1;
    -webkit-transform: rotate(-90deg);
}