Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/402.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 滑块第一图像固定宽度_Javascript_Html_Css_Slider - Fatal编程技术网

Javascript 滑块第一图像固定宽度

Javascript 滑块第一图像固定宽度,javascript,html,css,slider,Javascript,Html,Css,Slider,在我的滑动代码主页上,我想固定第一幅图像的宽度。是否可以通过css或html实现。因为我试过了,但没有工作。我当前的滑块css代码如下 #slider { background-attachment: scroll; background-color: #FFFFFF; background-image: url("http://silverharmony.in/wp-content/uploads/2012/10/Slider_bg.png"); backgro

在我的滑动代码主页上,我想固定第一幅图像的宽度。是否可以通过css或html实现。因为我试过了,但没有工作。我当前的滑块css代码如下

#slider {
    background-attachment: scroll;
    background-color: #FFFFFF;
    background-image: url("http://silverharmony.in/wp-content/uploads/2012/10/Slider_bg.png");
    background-position: 50% 0;
    background-repeat: repeat;
    display: block;
    float: left;
    width: 100%;
}

.inner, .wrapper {
    display: block;
    height: 100%;
    margin: 0 auto;
    position: relative;
    width: 960px;
    z-index: 0;
}

ul.kwicks {
    background-color: #333333;
    border-radius: 3px 3px 3px 3px;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

ul.kwicks li {
    background: url("../images/icons/ajax_loader.gif") no-repeat scroll 50% 50% transparent;
    display: block;
    overflow: hidden;
    padding: 0;
}

.kw_img {
    display: block;
}

.kw_img img {
    vertical-align: middle;
}

.kw_shadow {
    background: url("../images/icons/overlay.png") repeat-y scroll 0 0 transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    position: absolute;
    right: 0;
    width: 40px;
    z-index: 2;
}

.last .kw_shadow {
    background: none repeat scroll 0 0 transparent !important;
    border-right: 0 none;
}
我当前的滑动HTML代码如下

<div id="slider">
<div class="inner">
    <ul style="width:960px; height:400px; margin:15px 0;" data-width="960" data-max="660" class="kwicks" id="kwicks-1">
        <li class="kwick" style="left: 0px; width: 192px; margin: 0px; position: absolute;">
            <div class="kw_shadow"></div>
            <div class="kw_img">
                <img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/2.jpg&amp;h=400&amp;w=960&amp;zc=1&amp;q=100">
            </div>
        </li>
        <li class="kwick" style="left: 192px; width: 192px; margin: 0px; position: absolute;">
            <div class="kw_shadow"></div>
            <div class="kw_img">
                <img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-2.jpg&amp;h=400&amp;w=960&amp;zc=1&amp;q=100">
            </div>
        </li>
        <li class="kwick" style="left: 384px; width: 192px; margin: 0px; position: absolute;">
        <div class="kw_shadow"></div>
        <div class="kw_img">
                <img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/3.png&amp;h=400&amp;w=960&amp;zc=1&amp;q=100">
            </div>
        </li>
        <li class="kwick" style="left: 576px; width: 192px; margin: 0px; position: absolute;">
        <div class="kw_shadow"></div>
        <div class="kw_img">
                <img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-1.jpg&amp;h=400&amp;w=960&amp;zc=1&amp;q=100">
        </div>
        </li>
        <li class="kwick last" style="right: 0px; width: 192px; margin: 0px; position: absolute;">
        <div class="kw_shadow"></div>
        <div class="kw_img"><img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/1.jpg&amp;h=400&amp;w=960&amp;zc=1&amp;q=100"></div>
        </li>
    </ul>
</div>

目前我的滑块看起来像这样

我真的想喜欢下面的链接

Slider正在使用jQuery插件。我首先添加了
li
。kwicks selected
类以实现您所需的功能


这里的示例

您是否使用任何插件来完成这项工作??你检查过它的默认选项、设置或配置吗?我没有使用任何插件。它默认在我的主题中。它的名字“cstar WP Theme”是我从主题森林网站上买的。我全部选中,但没有选择。