带有垂直标题的 Kwicks 滑块

Question

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

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

HTML

Javascript： $().ready(函数 () { $('.kwicks').kwicks({ 尺寸：125， 最大尺寸：250， 间距：5， 行为：'菜单' }); $('.kwicks').kwicks('expand', 0); });

CSS： .kwicks { 宽度：515px； 高度：100px； } .kwicks > 李{ 宽度：125px； 高度：100px； /* 被 kwicks 覆盖，但适用于禁用 JavaScript */ 左边距：5px； 向左飘浮; } #panel-1 { 背景颜色：#53b388； } #panel-2 { 背景颜色：#5a69a9； } #panel-3 { 背景颜色：#c26468； } #panel-4 { 背景颜色：#bf7cc7； }

Answer 1

这样的？

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

注意：使用 webkit 浏览器。 （铬或野生动物园）

<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);
}