Question

在滑块代码的主页上，我想修复第一张图片的宽度。可以从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;
}

我目前的Slider HTML Code Bellow。

<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>

目前我的滑块看起来像这样。 http://silverharmony.in/

我实际上想要下面的链接。

http://silverharmony.in/wp-content/uploads/2012/10/slider-screenshoot.png

Answer 1

Slider正在使用Kwicks jQuery插件。我添加了第一个li项.kwicks-selected类来实现您的目标。

此处示例jsFiddle

滑块第一个图像修复宽度

1 个答案: