2015-01-23 3 views
0

позвольте мне объяснить вам мою проблему.Bootstrap 3 Проблемы с карусели с переворачиванием

Я создаю сайт (вот ссылка http://www.greekorama.gr), и у меня проблема с карусели carousel и навигатором navbar-top-fixed.

Если вы попытаетесь прокрутить вниз, используя боковую полосу прокрутки, все в порядке.

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

Попробуйте прокрутить, и вы увидите, о чем я говорю.

Это происходит на 4 страницах. Это на греческом языке, здесь значения

1) Αρχική Σελίδα = Главная страница

2) Παραγωγοί/Προϊόντα = Продукция/Производители

3) Καταλύματα = Проживания

4) Επιχειρήσεις = Бизнес

Это только в браузерах Google Chrome и Opera (в IE, Safari и Firefox все в порядке).

Я предполагаю, что это что-то с webkit происходит. Но я не могу понять, что.

Перелистывание происходит только под карусель. Я имею в виду, когда вы прокручиваете вниз, а карусель исчезает за навигационной панелью, в этот момент навигатор начинает листать.

Беллоу топ-фиксированный код Navbar

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 

      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a id="a-brand" class="navbar-brand center-block" href="index.php?content=home" style="font-size: 1.3em; font-family:Garamond, Verdana, Helvetica, Geneva, sans-serif;">Δήμος Θεσσαλονίκης</a> 
      </div> 
      <div class="collapse navbar-collapse" id="navbarCollapse"> 
       <ul class="nav navbar-nav center-block" id="ul-navmenu"> 
        <li><a id="a-navbar" href="index.php?content=home"><span class="glyphicon glyphicon-home"></span> Αρχική Σελίδα</a></li> 
        <li><a id="a-navbar" href="index.php?content=product_search"><span class="glyphicon glyphicon-leaf"></span> Παραγωγοί/Προϊόντα</a></li> 
        <li><a id="a-navbar" href="index.php?content=accom_search"><span class="glyphicon glyphicon-tower"></span> Καταλύματα</a></li> 
        <li><a id="a-navbar" href="index.php?content=business_search"><span class="glyphicon glyphicon-briefcase"></span> Επιχειρήσεις</a></li> 
        <li><a id="a-navbar" href="index.php?content=links"><span class="glyphicon glyphicon-link"></span> Σύνδεσμοι</a></li> 
        <li><a id="a-navbar" href="index.php?content=contact_form"><span class="glyphicon glyphicon-envelope"></span> Επικοινωνία</a></li> 

        <form class="navbar-form navbar-right" role="search" id="search"> 
         <div class="form-group"> 
          <input type="text" style="font-family:Garamond, Verdana, Helvetica, Geneva, sans-serif;" class="form-control" name="username" placeholder="Αναζήτηση"> 
         </div> 
        </form> 
       </ul> 
      </div> 
     </div> 
    </nav> 

Беллоу код карусельного

<div class="homeCarousel hidden-xs"> 
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"> 

     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="active item"> 
       <div class="carousel-caption"> 
        <img src="images/thessaloniki1.jpg"> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="carousel-caption"> 
        <img src="images/alexander1.jpg"> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="carousel-caption"> 
        <img src="images/aristotelous1.jpg"> 
       </div> 
      </div> 
     </div> 

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

Оба коды не в том же файле. Они находятся в разных файлах. Все 4 карусели (по одной на каждую страницу, о которой я вам рассказывал выше) имеют один и тот же код, единственное отличие - имена изображений и идентификатор карусели («homeCarousel», «prodCarousel» и т. Д. И т. Д.).

Любая помощь приветствуется. Заранее спасибо.

+0

Звучит как ошибка, не могли бы вы предоставить файл с исправлением ошибок (с минимальной тестовой записью, если возможно) на http://crbug.com? –

ответ

0

Я поставил twitter bootstrap карусель вместе с navbar-fixed-top на многих сайтах, и я не получаю эту ошибку ни на одном. Это означает, что в вашем исходном коде есть проблема.

Как вы уже поняли, это связано с карусели. Если вы удалите его из своего кода, эта ошибка не появится, я сделал это с элементом проверки, и ошибка не отображается.

Итак, я думаю, вы должны искать проблему внутри кода карусели, который вы разместили на своем веб-сайте. Первое, что я вижу, ведьма, я знаю, что это нехорошо, так это то, что вы заставили свои предметы карусели получить высоту 500 пикселей. Это не очень хорошо, потому что bootstrap не работает так. Вы должны использовать класс col-xs-12 вместе с классом homeCarousel, удалить высоту элемента и в то же время добавить класс img-responsive ко всем вашим изображениям, потому что в данный момент у них нет этого класса.Twitter-бутстрап - это гибкая система, и вы, похоже, не понимаете этого. Ваша карусель должна содержать изображения с одинаковыми размерами, и они должны быть в большом масштабе, чтобы покрыть, возможно, ширину не менее 1200 пикселей. Поэтому имейте в виду, не нажимайте ни одной высоты, потому что отзывчивость означает, что ширина будет соответствовать, а высота будет автосохраняться одна. Проверьте снова свой ==**START**== carousel styles и удалите бесполезный код и попытайтесь воспользоваться функциями начальной загрузки, как они есть, не пытайтесь их взломать, потому что они сделаны хорошо.

Если это не решит вашу проблему, попробуйте добавить jsfiddle, и я отредактирую его, чтобы работать на вас.

+0

Спасибо за решение, но он, похоже, не работает для меня, хотя я сделал то, что вы сказали. я не знаю, что я делаю неправильно ... вот jsfiddle, которую вы попросили http://jsfiddle.net/SirZaf/us02wnp0/, и еще раз спасибо за ваше время Редактировать: я удалил изменения, которые я сделал на коде, так что вы видите тот же код, что и в начале – zaf

+0

. Вы должны добавить jsfiddle с рабочим примером. Вы можете использовать изображения из placeholder.it, и мы должны видеть, что меню мерцает. В настоящее время страница белая. – paulalexandru

+0

http://jsfiddle.net/SirZaf/t6nncvxd/ это нормально? – zaf

2

У меня была аналогичная проблема на моей странице. Загрузочный навигатор размещен вместе с карусели вверху страницы. При прокрутке вниз навигатор получает position:fixed;. Чтобы избежать прыжков, я завернул контейнер вокруг моего навигатора, но заметил мерцание. Я мог бы решить эту проблему мое добавление более высокий Z-индекс в контейнере, просто убедитесь, что он выше, чем карусель, например, установить контейнер для: position:relative; и z-index: 999;

Вот пример https://jsfiddle.net/2xz4omLj/1/

0

Я нашел мое решение здесь:

Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

Он не говорит вам, какой элемент вы должны применить «отсев-видимость: скрытый». Первоначально я применял его ко всем элементам, но это не позволяло навигационному бренду (который отставал от какой-либо другой части навигатора в моем случае) от интерактивного доступа. В итоге я применил обратную видимость к .navbar и некоторым моим основным контейнерам.

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