Позиция: абсолютная, вызывающая сбой в моей карусели - PullRequest
Новая
       25

Позиция: абсолютная, вызывающая сбой в моей карусели

0 голосов
/ 09 февраля 2012

Ни один из плагинов карусели, которые я использую, не работает должным образом. Обычно мне нужно изменить размер браузера, чтобы все отображалось правильно. Это не практично, потому что у меня мобильное приложение.

Я прибил проблему к позиционированию. Переход между страницами требует, чтобы позиционирование было Абсолютным (см. #page > div). Тем не менее, карусель требует относительного позиционирования.

Я попытался добавить дополнительные <div></div> вокруг карусели и расположить их относительно, но это не помогло. Кто-нибудь знает, как это исправить ...

Transition.css: 

#page {
  position: relative;
}

#page > div {
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#page > div.current {
    display: block;
}

HTML: 

<!doctype html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cleartype" content="on">
  <link rel="stylesheet" href="css/transition.css?v=1">
  <link rel="stylesheet" href="css/elastislide.css?v=1">
</head>

<body>
<div id="page">  

<div id="pageLogin" class="pageLogin current">
    <a href="#pageSearch" id="signIn" class="button small brown"><span>Sign in</span></a>
</div>


<div id="pageSearch" class="pageSearch">
    <!-- Elastislide Carousel -->
    <div id="carousel" class="es-carousel-wrapper">
    <div class="es-carousel">
    <ul>
        <li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
        <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
        <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
    </ul>
    </div>
    </div>
    <!-- End Elastislide Carousel -->
</div> <!--! end #pageSearch-->
</div><!--end #Page-->

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.elastislide.js"></script>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 13 февраля 2012

Я нашел ответ на проблему.Это на самом деле display:none и display:block, которые были применены к страницам.

При отображении блока изображения карусели отображались в стиле блока, а не рядом.

Вместо display:none я использую visibility:hidden, height: 0, overflow: hidden.Тогда я просто перевернуть его, когда страница отображается.

0 голосов
/ 29 октября 2014

Я тоже имел и решил эту проблему.

Я использовал jQuery для применения CSS после загрузки документа.

Например: 

jQuery(document).ready(function($){
$('.more-wrapper').css({"display": "block", "position": "absolute", "left": "50%", "z-index": "100", "bottom": "40px", "-webkit-transform": "translate(-50%,0)", "-ms-transform": "translate(-50%,0)", "-o-transform": "translate(-50%,0)", "transform": "translate(-50%,0)"});
});
...