0

スライダー コードのホームページで、最初の画像の幅を修正したいと考えています。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>

</p>

現在、私のスライダーはこのようになっています。http://silverharmony.in/

そして、私は実際に以下のリンクが好きです。

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

4

1 に答える 1

1

Slider はKwicks jQuery プラグインを使用しています。あなたが探しているものを達成するために、最初のliアイテムクラスを追加しました。.kwicks-selected

ここでの例jsFiddle

于 2012-10-18T12:20:37.037 に答える