Twitter Bootstrap, Image overrite on Carousel

Я использую этот источник для создания бутстрапа миниатюры вертикальной карусели, его работы в виде шарма в Firefox и Safari (последняя версия), но не в хроме.Twitter Bootstrap, Image overrite on Carousel

Проблема возникает в firefox и safari при нажатии следующей или предыдущей. кнопка, текущая цепочка прокрутки изображения и после появления нового. Но в хромированной второй связкой пришел первый и место над первой и после этого первого сгустка исчезают,

Вот мой код И JS Fiddle HERE

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Thumbnail Slider</title> 
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
</head> 
<body data-twttr-rendered="true" data-spy="scroll" data-target=".bs-docs-sidebar"> 
      <div class="container"> 

       <div class="span8"> 

        <h1>&nbsp;</h1> 

        <div class="well" > 

         <div id="myCarousel" class="carousel vertical slide" > 
         <a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="icon/up.png"></a> 
         <a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="icon/down.png"></a> 

         <!-- Carousel items --> 
          <div class="carousel-inner"> 

           <div class="item active"> 
            <div class="row-fluid"> 
             <table> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/1.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/2.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/3.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/4.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
             </table> 
            </div><!--/row-fluid--> 
           </div><!--/item--> 

           <div class="item"> 
            <div class="row-fluid"> 
             <table> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/5.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/6.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/7.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/8.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
             </table> 
            </div><!--/row-fluid--> 
           </div><!--/item--> 

           <div class="item"> 
            <div class="row-fluid"> 
             <table> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/9.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/10.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/11.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
              <tr> 
               <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/12.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td> 
              </tr> 
             </table> 
            </div><!--/row-fluid--> 
           </div><!--/item--> 

          </div><!--/carousel-inner-->  

         </div><!--/myCarousel--> 

        </div><!--/well--> 
       </div> 
      </div> 

     <script src="js/jquery.min.js"></script> 
     <script src="js/bootstrap.js"></script> 
     <script src="js/script.js"></script> 
    </body> 
</html>

источник

2014-09-11 Shivam Pandya

похоже эта проблема есть с repo css сам. Файл, предоставленный центром git, имеет ту же проблему. Если вы зададите этот вопрос на репо, вы получите быстрый ответ. – Kshitiz

@ Kshitiz благодарит за ценный комментарий, но я новичок в git. это репо. это мое, и вы можете вести меня за то, что вы мне предлагаете? –

Для css некоторое время один и тот же css ведет себя по-разному в разных браузерах. Вам нужно проверить, какой css вы должны написать для браузера Chrome. Вы можете видеть, что те же самые css ведут себя по-разному в проводнике. Посмотрите на код и сообщите знакомому – Kshitiz

Проблема это, что карусельного контейнер (#myCarousel) не имеет явной высоты. Его ребенок .carousel-inner имеет height:100%, но так как #myCarousel не имеет явной высоты, это процентное значение не имеет эффекта, равно как и смещения на основе% элементов карусели.

Кратчайшее решения установить высоту упомянутую:

#myCarousel{ 
    height:380px; /* or em, or some other fixed value*/ 
} 

/* OR */ 

.carousel-inner{ 
    height:380px;/* or em, or some other fixed value*/ 
}

Live

Bu это не очень гибкое: если вам нужно изменить количество или размер элементов, эта высота должна также быть изменен.

источник

2014-09-22 07:11:47 bonflash

Спасибо, это то, что я ищу, n ya. не беспокойтесь о его гибкости. Я справимся. Еще раз спасибо –

@ShivamPandya рад, что я мог бы помочь! – bonflash

Twitter Bootstrap, Image overrite on Carousel

ответ

Смежные вопросы