2014-03-28 89 views
0

奇怪的是,旋轉木馬將滑動到下一張幻燈片,但它不適用於以前的幻燈片。 我對jsfiddle還不太熟悉,但正如你所看到的,下一個會變得高亮起來,但以前不會。bootstrap旋轉木馬控件不會更改爲上一張幻燈片

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

它得到強調,而不是隨處可見。 我覺得你的問題是因爲字幕的,會有很多CSS的方法來解決這個問題

Take a look at this screenshot showing where we cannot hover

當我們刪除你的風格=「左:0;底部:0;」在標題上,問題解決了。

+0

謝謝。我爲之前設置了z索引,它工作正常! –

+0

完美,很高興我能幫到你 – Gabriel

相關問題