幻灯片中有多个div

时间:2014-06-06 09:19:40

标签: jquery html css slideshow carousel

我想制作幻灯片并使用多个脚本来实现这一目标。但它仍然无效。第一个幻灯片类正在显示,但其中的div是隐藏的。我只是不知道如何使它工作。这是我的代码:

HTML

<div class="row-fluid">
    <div id="banner-wrapper" class="span12">
        <div class="slideshow">
            <div class="span8 offset2 slides">
                <div class="span7">
                    <div class="persons">
                    </div>
                </div>
                <div class="span5 banner-text">
                    <h1>Help hulpmiddelen hergebruiken</h1>
                    <h2>Carista vind het fijn als ze weet dat hulpmiddelen niet 
            ongebruikt blijven. Daarom wil ze je helpen om een 
            hulpmiddel te vinden dat precies bij je past.</h2>
                    <div id="search-item-btn" class="btn-green">Waar ben jij naar op zoek?<span class="chevron-down"></span></div>
                </div>
            </div>
            <div class="span8 offset2 slides">
                <div class="span7">
                    <div class="persons">
                    </div>
                </div>
                <div class="span5 banner-text">
                    <h1>Help hulpmiddelen hergebruiken</h1>
                    <h2>Carista vind het fijn als ze weet dat hulpmiddelen niet 
            ongebruikt blijven. Daarom wil ze je helpen om een 
            hulpmiddel te vinden dat precies bij je past.</h2>
                    <div id="search-item-btn" class="btn-green">Waar ben jij naar op zoek?<span class="chevron-down"></span></div>
                </div>  
            </div>          
        </div>
    </div>
</div>

CSS

#banner-wrapper{
    background-image:url(img/bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
}

#banner-wrapper .persons{
    background-image:url(img/personen1.png);
    background-repeat:no-repeat;
    background-size:contain;
    min-height: 710px;
    width: 100%;
    margin: 140px 0 -300px 0;
}

#banner-wrapper .banner-text{
    margin: 180px 0 0 0;
}

.banner-text h1{
    font-size:42px;
    font-weight:800;
    color:white;
    text-transform:uppercase;
}

.banner-text h2{
    font-size: 18px;
    font-weight: 600;
    color: white;
    line-height: 30px;
}

.btn-green{
    background-color:#cedd45;
    color:#4b4b4b;
    text-transform:uppercase;
    padding:12px 17px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    float:left;
    font-weight:700;
    font-size:16px;
}    

.chevron-down{
    width:17px;
    height:11px;
    float:right;
    margin:5px 0 0 15px;
    background-image:url(img/chevron-down.png);
    background-repeat:no-repeat;
    background-size:contain;
}

的jQuery

$(function () {
    $('.slides div').hide();
    $(".slides").first().show();
    setInterval(function () {
        $('div.slides').not(':eq(0)').hide()
         .next('.slides').fadeIn('slow')
         .end().appendTo('.slideshow');
    },5000);
});

0 个答案:

没有答案