Jquery 带垂直标题的Kwicks滑块

我需要创建一个滑块，如下链接所示

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

HTML

Javascript: $（）.ready（函数（）{ $（'.kwicks'）.kwicks({ 尺码：125， 最大尺寸：250， 间距：5， 行为：“菜单” }); $（'.kwicks'）.kwicks（'expand'，0）； });

CSS: kwicks先生{ 宽度：515px； 高度：100px； } .kwicks>li{ 宽度：125px； 高度：100px； /*由kwicks覆盖，但适用于禁用JavaScript时*/ 左边距：5px； 浮动：左； } #第一小组{ 背景色：#53b388； } #小组-2{ 背景色：#5a69a9； } #小组-3{ 背景色：#c26468； } #小组-4{ 背景色：#bf7cc7； }像这样的事

注意：使用webkit浏览器。（chrome或safari）

.kwicks>li:之后{
内容：attr（数据文本）；
位置：绝对位置；
顶部：40px；
左：0；
宽度：30px；
高度：30px；
线高：1；
-webkit变换：旋转（-90度）；
}

这是JSFIDLE：是的，但我还需要它像链接一样位于块中。非常感谢你的帮助。

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