Jump to content

What's wrong with carousel


Nic727
 Share

Recommended Posts

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 by Nic727
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...