bootstrap carousel控制没有改变到上一张幻灯片

时间:2014-03-28 19:35:58

标签: jquery html twitter-bootstrap

奇怪的是,旋转木马将滑到下一张幻灯片,但它不适用于以前的幻灯片。 我还不太熟悉jsfiddle,但正如你所看到的那样,下一个会被高兴,但之前不会。

jsfiddle

<!-- Carousel -->
<div id="carousel" class="carousel slide col-lg-offset-1" data-ride="carousel" style="max-width: 970px;">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
        <li data-target="#carousel" data-slide-to="4"></li>
    </ol>
    <div class="carousel-inner rs-slider">
        <div class="item active">
            <img src="http://www.nerisbakery.com/images/img-hero-family.jpg" alt="..." class="full-width" />
            <div class="container">
                <div class="carousel-caption" style="left: 0; bottom: 0;">
                    <p class="family"> <i>LtoR:</i> Paul A. Neri, Sr. - <i>Founder</i>

                        <br />Paul A. Neri, Jr - <i>Vice President</i>

                        <br />Theresa M. Neri, Jr - <i>Co-Founder</i>

                        <br />Dominick A. Neri, Jr - <i>President</i>

                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://www.nerisbakery.com/images/img-hero-family.jpg" alt="..." class="full-width" />
            <div class="container">
                <div class="carousel-caption" style="left: 0; bottom: 35px;">
                    <p class="largest">We are one of the largest bakeries in the United States</p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://www.nerisbakery.com/images/img-hero-family.jpg" alt="..." class="full-width" />
            <div class="container">
                <div class="carousel-caption" style="left: 0; bottom: 0;">
                    <p class="wholesale">Our state of the art, 260,000 sq.ft. facility is equipped to handle any job large or small. As the bakers for some of the country's most famous brand names, if you have enjoyed a bagel anywhere in the northeast, it was probably baked here at Neri's.</p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://www.nerisbakery.com/images/img-hero-family.jpg" alt="..." class="full-width" />
            <div class="container">
                <div class="carousel-caption" style="left: 0; bottom: 0;">
                    <p class="innovation">Neri's always has remained on the cutting edge of industry innovation. We have been prominently featured in many publications throughout the years and sited as an example of baking excellence!</p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://www.nerisbakery.com/images/img-hero-family.jpg" alt="..." class="full-width" />
            <div class="container">
                <div class="carousel-caption" style="left: 0; bottom: 0;">
                    <p class="retail-caption">Neri's Bakery is first and foremost a family business and we always have an eye on our neighborhood. Our plant is clean and green and our retail store is a local favorite. The Neri family takes pride in being part of our neighbor's lives and celebrations.</p>
                </div>
            </div>
        </div>
<a class="left carousel-control" href="#carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>

<a class="right carousel-control" href="#carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

    </div>

1 个答案:

答案 0 :(得分:1)

它确实得到了突出显示,但并非随处可见。 我认为你的问题是由于字幕,会有很多CSS方法来修复这个

Take a look at this screenshot showing where we cannot hover

当我们删除你的style =“left:0; bottom:0;”在标题上,问题解决了。