1

私は Nivo Slider を使用しており、箇条書き (controlnav) をスライダーの下から上に移動したいと考えています。しばらく試してみましたが、jquery はあまり得意ではありません。今のところ、ウィンドウのサイズを変更すると位置が変わります。それを固執させる方法はありますか、それともスライダーの下ではなく上にdivを配置する方法はありますか?

コードは次のとおりです。

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="img/bird1.jpg" alt="" />
        <img src="img/bird2.jpg" alt="" />
        <img src="img/bird3.jpg" alt=""  />
    </div>
</div>

nivo-slider css の controlnav は次のとおりです。

.nivo-controlNav {
position:fixed;
left:50%;
bottom:51%;
}

.nivo-controlNav a {
    cursor: pointer;
    position: relative;
    z-index: 99;
    float:left;
    }

.nivo-controlNav a.active {
    font-weight:bold;
}

そして、ここにcontrolnav javascriptがあります:

if(settings.controlNav){
        vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
        slider.after(vars.controlNavEl);
        for(var i = 0; i < kids.length; i++){
            if(settings.controlNavThumbs){
                vars.controlNavEl.addClass('nivo-thumbs-enabled');
                var child = kids.eq(i);
                if(!child.is('img')){
                    child = child.find('img:first');
                }
                if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
            } else {
                vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
            }
        }

十分に説明できたことを願っています。助けていただければ幸いです。

ありがとう!

4

1 に答える 1