jquery - 带有垂直标题的Kwicks滑块

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

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

的HTML
    
        
        
        
        
    

Javascript：
    $（）。ready（function（）{
        $（'。kwicks'）。kwicks（{
            大小：125，
            maxSize：250，
            间距：5
            行为：“菜单”
        }）;
        $（'。kwicks'）。kwicks（'expand'，0）;
    }）;

CSS：
     .kwicks {
         宽度：515px；
         高度：100px；
     }
     .kwicks> li {
         宽度：125像素；
         高度：100px；
         / *被kwicks覆盖，但是当禁用JavaScript时非常有用* /
         左边距：5px;
         向左飘浮;
     }
     ＃panel-1 {
         背景颜色：＃53b388;
     }
     ＃panel-2 {
         背景颜色：＃5a69a9;
     }
     ＃panel-3 {
         背景颜色：＃c26468;
     }
     ＃panel-4 {
         背景颜色：＃bf7cc7;
     }

最佳答案

这样的东西？

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

关于jquery - 带有垂直标题的Kwicks滑块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21715389/