Home/ Questions/Q 7444811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T11:35:37+00:00

None of the carousel plugins I use are working properly. Usually I need to

  • 0

None of the carousel plugins I use are working properly. Usually I need to resize my browser before everything is displayed properly. This is not practical because mine is a mobile app.

I have nailed down the problem to positioning. The transition between pages requires the positioning to be Absolute (see #page > div). However, the carousel requires the Relative positioning.

I tried adding an extra <div></div> around the carousel and positioning that to be relative, but it isn’t doing the trick. Anyone know how to fix this…

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found the answer to the problem. Its actually the display:none and display:block, that was applied to the pages.

    The display block caused the carousel’s images to display block style instead of side by side.

    Instead of display:none, I use visibility:hidden, height: 0, overflow: hidden. Then I just reverse it when the page displays.

    • 0