Question

我需要创建一个滑块，如下面的链接所示 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＆gt; li { 宽度：125px; 身高：100px; / *由kwicks覆盖，但在禁用JavaScript时很有用* / margin-left：5px; 向左飘浮; } ＃panel-1 { background-color：＃53b388; } ＃panel-2 { background-color：＃5a69a9; } ＃panel-3 { background-color：＃c26468; } ＃panel-4 { background-color：＃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);
}

Kwicks滑块与垂直标题

1 个答案: