What's wrong with carousel

[Nic727]

Hi, I put a simple carousel on my website and I have a strange bug and I don't know how to resolve it. I tried everything...I made a small video about that : http://depositfiles.com/files/by2uq5xl3

 

What do you think?

I'm not able to see my teacher toomorow and that's sad.

 

 

Thank you and sorry for all my questions/problems.

[tejasamrute]

the link which you attached is not working......Can you upload your code on a server n show what wrong is happening?

[Nic727]

hum... The link work for me. Try on my server : http://aqua.nicolas-duclos.com/capture-2My code :

<div id="carousel-example" class="carousel slide" data-ride="carousel" style="border:2px solid #e1e1e1;">                     <div class="carousel-inner">      <div class="item active">          <a href="img/1.jpg" data-lightbox="image-1" data-title="My caption"><img src="img/1.jpg" alt="" /></a>                                 </div>      <div class="item">          <a href="img/2.jpg" data-lightbox="image-1" data-title="My caption"><img src="img/2.jpg" alt="" /></a>                                </div>      <div class="item">          <a href="img/3.jpg" data-lightbox="image-1" data-title="My caption"><img src="img/3.jpg" alt="" /></a>                                 </div>   </div>         <!--INDICATORS-->            <ol class="carousel-indicators">              <li data-target="#carousel-example" data-slide-to="0" class="active"></li>              <li data-target="#carousel-example" data-slide-to="1"></li>              <li data-target="#carousel-example" data-slide-to="2"></li>            </ol>         <!--PREVIUS-NEXT BUTTONS-->		<a class="left carousel-control" href="#carousel-example" data-slide="prev">		<span class="glyphicon glyphicon-chevron-left"></span>		</a>		<a class="right carousel-control" href="#carousel-example" data-slide="next">		<span class="glyphicon glyphicon-chevron-right"></span>		</a></div>

Edited December 10, 2014 by Nic727

[Ingolme]

We can't know what the browser is doing just by seeing a video. We need to see a working page where we can analyze the DOM and check for Javascript errors.

[Nic727]

http://aqua.nicolas-duclos.com scroll down for carousel.

Edited December 10, 2014 by Nic727

[Ingolme]

I think this is the source of your problem in your stylesheet: moncss.css

.left{float: left;}.right{float: right;}

The carousel dynamically adds classes "left" or "right" during the transition and your stylesheet is interfering.

 

Change these class names to something else

[dsonesuk]

The slide image is returning to its original size, you need to set a height for container window. You could get current height of container when page first loads, then set the height of images to that.

[Ingolme]

The slide image is returning to its original size, you need to set a height for container window. You could get current height of container when page first loads, then set the height of images to that.

 

That would be a way to patch it up, but I prefer to solve problems right from their root.

 

Bootstrap's carousel script is supposed to take care of the image sizes without the need of extra styling. The reason the image is returning to its original size unexpectedly is because he is overriding the carousel's "left" and "right" classes in his stylesheet.

[dsonesuk]

Then he does not need to change class names, and change the root design on how the slideshow functions, he just needs to disable the .left, .right from applying float in carosel specifically.

[Nic727]

Thank you I will try that!