基本的jQuery滑块(BJQS)无法与一个幻灯片一起使用



我的基本 Jquery slider(bjqs)在我只给出一个li元素之后无法工作...结果不显示我在li标签中放置的内容。。

这里发生了什么问题?

4 li(工作正常):链接(http://jsfiddle.net/nikhilvkd/daxg7/9/)

    <article class="salon_cvrs" id="banner-fade">                       
                            <ul class="bjqs">
                                <li>
                                    <article class="saloon-box">
                                            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                    </article>
                                    <article class="saloon-box">
                                            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                    </article>
                                    <article class="saloon-box">
                                            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                    </article>
                                    <article class="saloon-box">
                                        <article class="featured">
                                            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                    </article>
                                </li>
                            <li>
                                <article class="saloon-box">
                                            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                </article>
                                <article class="saloon-box">
                                    <p>Everyone loves an effortless hairstyle that also hints at glamour. And an easy up-do that doesn't feel too 'done' is exactly the way to go to create it. </p>
                                </article>
                                <article class="saloon-box">
                                            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                </article>
                                <article class="saloon-box">
                                    <article class="featured">
                                            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                </article>
                            </li>
                            </ul>
                        </article>

只有一个li(不工作):( http://jsfiddle.net/nikhilvkd/xd4fl/9/)

<article class="salon_cvrs" id="banner-fade">                       
                        <ul class="bjqs">
                            <li>
                                <article class="saloon-box">
                                        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                </article>    
                                <article class="saloon-box">
                                        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                </article> 
                                <article class="saloon-box">
                                        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                </article> 
                                <article class="saloon-box">
                                        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                                </article>                        
                            </li>
                        </ul>
                    </article>

看起来,当仅提供一个项目作为幻灯片时,您所拥有的脚本不会更改布局。它消失的事实是因为您自己的风格

li.bjqs-slide{
    position:absolute;
    display:none;
}

如果将display: none更改为display: blockinline-block-将显示幻灯片

相关内容

最新更新